Créer une activity pour Internet Explorer 8

J'ai déjà parlé dans un précédent billet de la sortie de la version beta d'IE8, qui parmis ses nouveautés apportait les fameuses "activities". Ces activités apparaissent à coté de la souris lorsqu'on sélectionne un texte dans le navigateur, ce qui permets d'envoyer la sélection à une autre page, avec aussi la possibilité d'en avoir un aperçu.

Pour mieux vous faire une idée, voilà un peu à quoi ça ressemble (et si vous êtes équipé d'IE8, vous pouvez tester directement sur le site) :

Au passage, et avant qu'on ne m'en fasse la remarque, je signale qu'une extension pour firefox existe qui permets d'utiliser ces activities dans le navigateur libre, cependant sans le preview (du moins dans la version que j'ai essayé, je ne doute pas que ça viendra bientôt).

Je vous vois tous baver d'envie devant cette fonctionnalité innovante qui fidélisera vos visiteurs, et vous vous demandez comment en créer une pour votre site web... pas la peine de s'énerver, j'y arrive !

De quoi est composé une activity ? Principalement de 3 choses :

• Une page de preview
• Une page de destination
• Un fichier XML

D'abord la preview : c'est une page qui s'affichera en petit lorsque vous laisserez le curseur sur l'activity. C'est une page web classique, je vous fais confiance pour la faire. N'abusez pas des fioritures, n'oubliez pas que c'est qu'une miniature, faites simple. (dans mon exemple, juste une image)

La page de destination : c'est la page où l'utilisateur sera redirigé lorsqu'il cliquera sur l'activity. Là aussi, une page de votre site, rien de bien compliqué.

Ensuite, le fichier XML : c'est un fichier qui va décrire votre activity. Il va contenir les différentes informations utiles au navigateur pour acceder à votre site. Un exemple vaux mieux qu'un long discours, voici le fichier de description de mon activity :

<?xml version="1.0" encoding="UTF-8"?>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
  <homepageUrl>http://comics.my-underworld.net</homepageUrl> 
  <display>
    <name>Chercher le personnage de comics</name> 
    <icon>http://comics.my-underworld.net/favicon.ico</icon> 
  </display>
  <activity category="Comics"> 
    <activityAction context="selection">
      <preview action= "http://comics.my-underworld.net/preview.php"> 
        <parameter name="q" value="{selection}"/>
      </preview>
      <execute action="http://comics.my-underworld.net/recherche.php"> 
        <parameter name="q" value="{selection}" type="text" />
      </execute>
    </activityAction>
  </activity>
</openServiceDescription>

C'est pas compliqué, vous le prenez et vous l'adaptez à vos besoins.

Il vous faudra modifier :

• <homepageUrl> : l'adresse de votre site web



• <icon> : l'icone de l'activity



• <activity category="..."> : la catégorie dans laquelle sera classé l'activity



• <preview action="..."> : l'adresse de la page de preview
  
  
  
  • <parameter> : les paramètres à passer dans l'url de votre page de preview (vous pouvez en mettre plusieurs). Si la valeur est "{selection}", le texte sélectionné dans IE sera passé en paramètre.
  
  
  
  



• <execute action="..."> : l'adresse de redirection lors d'un clic sur l'activity
  
  
  
  • <parameter> : même principe que pour la preview, les paramètres sont passés dans l'url
  
  
  
  

Une fois que c'est fait, vous pouvez enregistrer ce fichier dans votre site web. Pour proposer à vos visiteurs de l'installer, une petite ligne de javascript :

<a href="javascript:window.external.addService('activity.xml')">Installer l'activity</a>

Problème de positionnement lors du redimensionnement de la fenêtre d'Internet Explorer 7

J'ai été confronté à un bug d'Internet Explorer assez amusant (enfin, jusqu'à ce qu'on veuille le corriger). Voilà une page html tout ce qu'il y a de plus classique :

    <div style="float: left; position: relative; width:140px; background-color:Red;">
      Menu :
      <ul>
          <li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
  </div>
  <div style="float: left; width:500px; background-color:Blue;">
      <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent a magna. Sed
          ipsum dolor, facilisis vitae, placerat quis, pulvinar in, est. Pellentesque habitant
          morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce quis
          elit nec tortor tempus luctus. Nam tristique. Pellentesque vitae massa ac arcu lacinia
          blandit. Quisque placerat elementum erat. Suspendisse consectetuer felis semper
          velit. Vivamus vitae est. Nam vel erat. Vestibulum nec nulla. Curabitur sed nisi.
          Suspendisse id odio. Suspendisse potenti. Quisque velit augue, ullamcorper et, gravida
          ultrices, consectetuer sit amet, neque. Phasellus eget nulla. In lacinia mauris
          a enim.
      </p>
  </div>

Ce qui nous donne un rendu assez semblable à ce qu'on attends :

 
(j'ai jamais prétendu être doué en design ^^)

Le problème apparait lorsque l'on essaie de redimensionner la fenêtre :

Et oui, le menu passe par dessus l'autre div !




Lors du redimensionnement, le div bleu a bougé comme il faut, le rouge est resté immobile.

Après m'être arraché les cheveux sur ce problème, j'en suis venu aux conclusions suivantes :

• Le problème apparait avec IE6 et IE7



• Les autres navigateurs ne posent aucun problème



• Si on recharge la page, elle s'affiche correctement, seul un redimensionnement pose problème



• Le problème se pose sur les éléments flottants en position relative

Pour corriger ça, on a 2 solutions :

• Enlever le "position:relative;" (mais bon, en général si il y est, c'est qu'il y a une raison)



• Mettre le "position:relative;" sur toute la page (en le mettant sur le body)

Et normalement, vous devriez retrouver un comportement normal lors du redimensionnement...

Centrer un élément de type block

C'est pas compliqué, mais il vaut mieux le savoir, plutot que de perdre du temps à comprendre pourquoi ça marche pas. Pour aligner un texte dans un block, c'est tout simple :

.baliseBlock {
 text-align: center;
}

Par contre, si on veut aligner un block dans un block, ça ne fonctionne pas (enfin, pas avec tous les navigateurs). Pour cela il faut définir la largeur de notre block, et mettre ses margin à auto :

.baliseACentrer {
 margin-left: auto;
 margin-right: auto;
 width:50%;
}

Maintenant, plus compliqué : si on a défini notre block en positionnement absolu, on ne peux pas centrer en utilisant les margin. Dans ce cas, il va falloir ruser. Attention, cette astuce peut poser certains problèmes si on réduit la page (une partie de la page est rognée, avec impossibilité d'y acceder), soyez-en conscient si vous devez l'utiliser, et préférez systématiquement la méthode précédente si vous le pouvez.

Pour centrer notre élément, on va donc le positionner à 50% du bord gauche, puis le décaler vers la gauche de la moitié de la largeur du block.

.baliseACentrer {
 position: absolute;
 width:600px;
 left: 50%;
 margin-left: -300px;
}

Là ça fonctionne, mais il faut connaitre la taille exacte de notre block pour pouvoir le centrer. Je vous donne une dernière astuce pour utiliser des largeurs non connues à l'avance.

Cette fois, on va utiliser deux blocks imbriqués :

<div class="divExterieur">
 <div class="divInterieur">
     Contenu...
 </div>
</div>

Ce qui va permettre au div intérieur de se décaler vers la gauche en tenant compte de la largeur de son div parent :

.divExterieur {
 position: absolute;
 width:40%;
 left: 50%;
}
.divInterieur {
 width: 100%;
 margin-left: -50%;
}

ValidateRequest : activation par code

Attention, ça devient sérieux et ça rigole pas : on va parler sécurité !

Pour peu que vous vous soyiez un peu interressé au sujet, vous savez qu'il ne faut jamais faire confiance aux utilisateurs et controler tout ce qu'ils font. Si jamais vous faites partie de ces personnes qui ne s'en soucient pas le moins du monde, Asp.net vous protège quand même malgré vous, grâce au ValidateRequest. Bien que ne remplaçant pas une sécurisation correcte du code par le développeur, c'est quand même un formidable atout pour protéger les quelques endroits que vous auriez oublié de sécuriser.
Le principe : chaque requête est analysée, et si l'une d'entre elle ressemble de près ou de loin à une tentative de piratage, le site renvoie une exception du style : A potentially dangerous Request.Form value was detected from the client (login="<script>hahaha</scri...").

Cependant, bien que très pratique, cette protection peut s'avérer irritante pour certains, si par exemple on estime que l'utilisateur a le droit d'envoyer du code html sur le site. Dans ce cas, pas de soucis, on désactive le ValidateRequest dans la directive de la page :

<%@ Page Language="C#" ValidateRequest="false" %>

voire même dans le web.config pour les plus téméraires :

<pages validateRequest="false">
   ....
</pages>

Mais voilà le soucis, je suis totalement parano : je me suis vu obligé de désactiver le ValidateRequest pour que les administrateurs de mon site puissent faire leur boulot, mais il est hors de question que je le laisse les utilisateurs anonymes faire n'importe quoi !

Mon premier réflexe a donc été de vérifier par code si l'utilisateur était administrateur avant de décider si j'active ou désactive la sécurité... et déception : aucune propriété "ValidateRequest" dans ma page.

Un petit tour sur le msdn donc, et je tombe sur quelque chose d'interressant : HttpRequest.ValidateInput Method "Validates data submitted by a client browser and raises an exception if potentially dangerous data is present." ça me plait bien, c'est justement ce que je veux. Je désactive donc le ValidateRequest, et j'appelle cette méthode par code... et là re-déception. Tout semble correct, et pourtant quand je balance un script javascript, ça passe comme si de rien n'était.

Pour comprendre, je vais faire un petit tour dans Reflector, et quelle n'est pas ma surprise de voir ça :

public void ValidateInput()
{
   this._flags.Set(1);
   this._flags.Set(2);
   this._flags.Set(4);
   this._flags.Set(0x40);
}

Au lieu de valider ma requête comme je m'y attendais, cette méthode se contente de modifier un flag. Il s'avère qu'en fait la validation ne s'effectue pas lors de l'appel du ValidateInput, mais lorsque l'on essaie d'acceder à notre HttpRequest. Il suffit donc pour sécuriser notre application de lire dans Request après avoir fait le ValidateInput. Ce qui nous donne quelque chose comme ça (En ayant pris soin auparavant de désactiver le ValidateRequest dans la page) :

protected void Page_Load(object sender, EventArgs e)
{
   if (!Context.User.IsInRole("administrateur"))
   {
       try
       {
           // on flague le Request
            Request.ValidateInput();
           // on lit un objet qui n'existe pas, juste pour lancer la validation
            object forceValidation = Request["ForceValidation"];
       }
       catch
       {
           // on tombe ici si la requête est suspecte
            throw;
       }
   }
}

En espérant que ça vous sera aussi utile qu'à moi !

Safari 3.1 disponible en version finale

Le navigateur d'Apple est enfin sorti en version finale pour Windows, les développeurs web vont enfin pouvoir tester leurs sites web dessus sans être obligé d'acheter un Mac.

Evidemment, je l'ai installé, et j'ai testé rapidement. Bilan rapide après quelques minutes d'utilisation : c'est joli, agréable à utiliser (forcément, c'est fait par Apple), mais à part ça, ça casse pas trois pates à un canard. Il plaira certainement à ceux qui n'attendent rien de plus de leur navigateur que la possibilité de naviguer, les autres feraient mieux de tester Opera (j'ai entendu quelqu'un dire "Firefox" ? faut arrêter là, c'est un blog sérieux !)

Si vous avez envie de tester, c'est par là : http://www.apple.com/safari/download/

Internet Explorer 8 - beta 1

Et oui, je commence un blog pour parler de web, et je parle déjà d'Internet Explorer... J'en entends déjà crier à l'hérésie, mais je m'en fous, j'assume !

 

La première beta d'Internet Explorer 8 est disponible depuis un peu plus d'une semaine, et en tant que fou suicidaire je me suis donc empressé de l'installer sur ma machine de développement. Si ça vous interresse aussi, c'est par là :
http://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/Install.htm
Notez qu'il est possible de s'en servir avec le moteur de rendu d'Internet Explorer 7, tout en gardant les nouvelles fonctionnalités, et même pour les plus méfiants de le désinstaller (affichez les mises à jour dans le panneau de suppression des programmes)

Premières impressions : y'a encore du travail... mais on sent qu'il y a eu des efforts de faits. Cette beta passe le test Acid2, mais a du mal avec énormément de "vrais" sites web... Si votre site ne s'affiche pas correctement, ne le corrigez pas pour le moment, vu que le moteur de rendu subira probablement d'autres modifications d'ici la version finale.
Si vous tenez malgré tout à ce que votre site s'affiche correctement, vous pouvez ajouter la balise suivante dans l'en-tête de vos page, qui forcera Internet Explorer a utiliser le rendu de la version 7 :

<meta http-equiv="X-UA-Compatible" content="IE=7">

Sinon niveau fonctionnalités, j'aime beaucoup les "Activities", qui permettent de sélectionner du texte et de l'envoyer directement dans une recherche google ou dans un traducteur en ligne.

En route pour la Bewise Developer Conference 2008

La seconde édition de la Bewise Developper Conference aura lieu à Toulouse le 10 avril prochain

Cet évènement gratuit qui s'adresse aussi bien aux professionnels qu'aux étudiants et enseignants en informatique est l'occasion de découvrir ou d'approfondir ses connaissances dans les dernières technologies de Microsoft.

Développez votre avance en assistant aux différentes sessions et en posant vos questions aux experts de Bewise

Pour les inscriptions, c'est là : BDC 2008

Moi aussi je me lance dans la grande aventure des blogs !

Depuis le temps que je me dis que je devrais en faire un, le voilà enfin : mon blog !

Au programme : Développement html, css, asp.net, navigateurs... en gros,tout ce qui tourne autour du web :) Le web c'est le bien, n'écoutez pas les grincheux qui en disent du mal !

 

Au passage, merci à Laurent pour m'avoir trouvé le titre du blog !