cogimator.net

Une ligne à la fois...

FluentNHibernate 1.1, Castle.DynamicProxy2 2.2.0 et Castle.Core 1.2.0

Pour ceux qui rencontrent des problèmes à l’exécution (Castle.DynamicProxy2 2.1.0 attendu, et 2.2.0 trouvé), deux solutions s’offrent à vous :

- télécharger la dernière version du code source de FluentNHibernate, et la compiler en utilisant les références aux bonnes versions de Castle.Core, et Castle.DynamicProxy2

- ajouter les lignes suivantes dans votre web.config/app.config, dans la section “configuration” :

  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="Castle.DynamicProxy2" 
publicKeyToken="407dd0808d44fbdc" culture="neutral" />
        <bindingRedirect oldVersion="2.1.0.0" newVersion="2.2.0.0" />
      </dependentAssembly>
    </assemblyBinding>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="Castle.Core" 
publicKeyToken="407dd0808d44fbdc" culture="neutral" />
        <bindingRedirect oldVersion="1.1.0.0" newVersion="1.2.0.0" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>

Création d’images zoomables avec DeepZoom.

DeepZoom est une technologie Microsoft permettant de visionner des images de très grande taille. Pour le web, cela permet d’éviter le téléchargement d’une image complète avant de pouvoir la visualiser.
Plus d’informations sur DeepZoom ici : http://msdn.microsoft.com/fr-fr/library/cc645077%28v=VS.95%29.aspx

Afin de pouvoir convertir vos images, vous devrez disposer de DeepZoom Composer : http://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en
Une fois l’installation effectuée, vous pourrez référencer DeepZoomTools.dll.

Une fois la dll DeepZoomTools référencée, vous pouvez convertir vos images avec la classe ImageCreator :

var ic = new ImageCreator();
ic.Create("input.jpg", "output");

La conversion d’une image est relativement gourmande en CPU et en entrée/sortie disque, du fait des nombreuses images crées.

Néanmoins, l’objet ImageCreator propose quelques propriétés permettant de modifier la taille des fichiers en sortie :

TileSize

Par défaut 256.  Une valeur de 512 produira des “tuiles” plus grandes et permettra de réduire les temps de conversion. Le nombre de fichiers JPG produits sera également réduit.

ConversionImageQuality

Par défaut 0.8, définit la compression JPG des images de sortie. Une valeur plus faible (0.7 par exemple) produira des fichiers plus petits, au prix d’une perte de qualité.

MaxLevel

Pour une image de 3072*2304, l’outil générera 12 niveaux (soit 12 sous dossiers avec les “tuiles”). Cette valeur définit donc le niveau de zoom maximum. Une valeur plus faible accélérera grandement la vitesse de conversion. En effet, plus le niveau de zoom est élevé, plus le nombre de fichiers JPG produit sera grand.

Pourquoi modifier ces paramètres ?

Dans le cas de conversion à la volée, ou de conversion en masse, il peut devenir intéressant d’optimiser les temps de conversion. De la même manière, si les images converties sont beaucoup consultées, il est important de tenir compte de la taille et du nombre des fichiers de sortie.

Le programme ci joint met en évidence l’influence de chaque paramètre sur le temps de conversion, la taille de l’image convertie, ainsi que le nombre de fichiers générés.

Liens utiles

Gestion de favoris avec del.icio.us

Il fut un temps, où mes favoris étaient tous stockés en local, et je considérais de les stocker chez un "fournisseur", un peu comme une hérésie... Paranoïa peut-être, résistance au changement sans doute.

Maintenant, deux problèmes sont posés par le modèle "traditionnel" du favori :

  • classement arborescent
  • réplication difficile entre plusieurs postes de travail

Le classement arborescent pose vite ses limites à partir de 100 favoris : à la fois pour la sauvegarde, et pour la lecture. Si on duplique un favoris dans deux sous branches de l'arborescence, on complexifie le processus de sauvegarde. Si on ne le place que dans une seule sous branche, on risque de ne plus retrouver son favori si on ne cherche pas exactement au bon endroit.

Concernant la réplication, il suffit de vouloir synchroniser ses favoris sur deux postes ou plus pour se rendre compte de la lourdeur de la chose.

Donc, la solution (avec un peu de retard, ce service n'est plus tout jeune!): del.icio.us. Un service de "stockage" de favoris en ligne, avec un classement par "tags". Au lieu de classer un favori dans une arborescence, on lui affecte des tags : des mots-clés. Et le plus beau dans tout ca, c'est qu'on peut retrouver une arborescence : si un favori est taggé "blog it sharepoint", il sera dans l'arborescence "blog / it / sharepoint", "sharepoint / blog / it", "it / sharepoint / blog", etc. Ceci permet de retrouver un favori bien plus facilement : on part d'un tag, et on voit immediatement les autres tags "voisins".

Le plus dur étant d'être rigoureux dans la taxinomie afin d'éviter les doublons du style graphic/graphics/graphism/images. Quand cette habitude est prise (avec l'aide l'extension Firefox fournie), le processus devient beaucoup plus naturel que le classement arborescent.

Une fois le compte crée, l'extension Firefox installée, et les anciens favoris importés (et reclassés), on ne peut plus s'en passer, rien que pour l'aspect synchronisation, et pour la barre d'outils, qui permet de placer des tags judicieusement choisis comme menus déroulants. Comme par exemple :

  • frequent : sites que je fréquente très ... fréquemment
  • reference : sites de reference (msdn, nhibernate doc, nant help, etc. )
  • toread : articles que j'estime interessants à lire tranquillement plus tard
  • tostudy : idem que toread, mais pour des outils

Avantages : classement par tags, synchronisation

Inconvenients : impossible de mettre des mots composés ("intégration continue" par exemple) comme tags


Formulaires (x)html : comment faire ?

Si comme moi vous aimez les standards et l'accessibilité vous avez déjà du vous arracher des cheveux sur les formulaires web. En plus d'entretenir une future calvitie, ca me chagrinais (oui je suis comme ça...) de ne pas avoir de "modèle". En voilà donc un, qui permet de gérer le traditionnel formulaire sur deux colonnes, avec à gauche les libellés, et à droite les champs de saisie.

Rien de bien revolutionnaire dans tout cela, on pourra juste noter que ce modèle

  • se base sur des position:absolute au lieu de float:left pour aligner les label, suite à la lecture de cet article.
  • permet d'avoir une zone de "droite" plus haute que celle de gauche (cf l'exemple).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>Test formulaires</title>
  <style type="text/css">
  .left {
    position: absolute;
    width: 250px;
    border: 1px solid black;
    padding: 5px;
    margin-top: 5px;
  }
  form {
   position: absolute;
   width: 500px;
   margin-left: 270px;
  }
  form label {
   position: absolute;
   width: 180px;
  }

  form label strong {
   color: red;
  }

  form .droite {
   padding-left: 190px;
   width: 350px;
   padding-bottom: 20px;
  }  

  form .droite .error {
   color: red;
   margin: 0;
  }

  form .droite .info {
   font-decoration: none;
   margin: 0;
  }

  form .boutons {
   margin-left: 190px;
  }
  </style>
 </head>
 <body>
  <div class="left">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <form action="#">
   <fieldset>
    <legend>test</legend>
    <label for="nom">Nom <strong>*</strong></label>
    <div class="droite">
     <input type="text" id="nom"/>
     <p class="error">Le nom est obligatoire</p>
    </div>
    
    <label for="prenom">Prenom <strong>*</strong></label>
    <div class="droite">
     <input type="text" id="prenom"/>
     <p class="error">Le prenom est obligatoire</p>
    </div>
   
    <label for="age">Age</label>
    <div class="droite">
     <input type="text" id="age"/>
     <p class="info">Purement indicatif</p>
    </div>
   
    <label for="couleur">Couleur préférée</label>
    <div class="droite">
     <select id="couleur">
      <option>rouge</option>
      <option>vert</option>
      <option>bleu</option>
     </select>
    </div>
   
    <label>Couleurs detestées</label>
    <div class="droite">
     <input type="checkbox" id="noir"/><label for="noir">Noir</label><br/>
     <input type="checkbox" id="gris"/><label for="gris">Gris</label>
    </div>
   
    <div class="boutons">
     <input type="submit" value="Valider"/>
     <input type="reset" value="Annuler"/>
    </div>
   </fieldset>
  </form>
 </body>
</html>

Vous pouvez voir le rendu ici formulaire_xhtml.html (2,47 kb)