Menu déroulant en CSS uniquement

Si vous avez déjà essayé de faire un menu déroulant dans une page Web, vous avez sans doute constaté que c’est tout à fait réalisable en pur CSS (sans Javascript), mais qu’à cause des limitations d’Internet Explorer il fallait rajouter une surcouche de Javascript - ce qui empêche les visiteurs ayant désactivé Javascript d’utiliser le menu. Il est communément admis qu’un menu CSS-only n’est pas réalisable sous IE…

Hé bien Stu Nicholls a trouvé un moyen, et développé un menu déroulant sans Javascript, passant sous les principaux navigateurs, dont IE6 et IE7b. Il utilise pour cela une bizzarerie du rendu d’IE6, qui lui permet d’imbriquer des liens si ils sont contenus dans des tables. Grâce aux commentaires conditionels, le code général et la feuille CSS restent valides.

J’ai implémenté cette merveille du côté de Viens voir ce site !, ce sera en ligne d’ici quelques jours. Vous pouvez en attendant consulter la page de démonstration et d’explications de Stu Nicholls, The Ultimate CSS only Dropdown Menu. Enjoy !

Charts et Graphiques en C#

Dans le cadre d’un projet en C#, j’ai eu à représenter des courbes dans un repère - un peu comme sur l’écran d’un oscilloscope. J’ai donc dû me documenter sur les différentes possibilités d’afficher des graphiques, des courbes et des statistiques diverses en C#. Cela m’a conduit à plusieurs librairies et tutoriaux permettant d’atteindre ce but plus ou moins facilement.

Les librairies

NPlot

NPlot est une librairie de charts légère, mais semble-t’il assez complète. Sa courte page d’exemples est assez impressionante par le nombre d’options et de customisations possibles. Les graphiques produits peuvent être affichés dans un contrôle WindowsForm ou dans une page web ASP.NET. De plus, sa license personnalisée est compatible avec une utilisation commerciale et non contaminante - à l’inverse de la GPL. Malheureusement, il n’y a quasiment aucune documentation, ni, ce qui est bien pire, aucun exemple de code. Bref, par paresse, je n’ai même pas essayé. Mais l’auteur semble être en train de rédiger une documentation et des exemples complets ; NPlot peut donc être à surveiller.

ZedGraph

ZedGraph est une autre librairie OpenSource, plus puissante et plus complète que NPlot. Comme NPlot, elle est compatible WinForms et WebForms. Licencié sous LGPL, qui permet une inclusion à du code propriétaire sans problèmes particuliers, elle est très bien documentée (à l’aide de l’exellent NDoc), et surtout possède de nombreux exemples, ainsi qu’un tutoriel très complet sur Code Project. Bref, très complet, simple à utiliser… mais évidemment pas super légère, et ne convenant probablement pas à un usage PocketPC ou SmartPhone.

Tutoriaux

Création d’un contrôle utilisateur GDI+

Ce tutoriel, qui nous vient de Supinfo, explique comment créer un contrôle utilisateur utilisant GDI+. Cela permet en gros de créer un composant qui instanciera une surface et dessinera des primitives dessus. Le contrôle est ensuite exportable dans Visual Studio, et peut se configurer entièrement avec le Form Designer. Bref, un très bon pas-à-pas pour établir la structure d’un composant GDI+ générique.
Supinfo - Créer un contrôle utilisateur d’affichage des données

Charts minimalistes en C#

Ce second tutoriel, hébergé sur DevX, explique comme afficher des graphiques et des courbes statistiques en utilisant GDI+. Il détaille le système de changement de repère, la création d’échelles et de graduations, et bien plus encore. Le texte de l’article est assez avare en code, il faut penser à suivre les liens pour récupérer le code correspondant. C’est ce tutorial qui m’a été le plus utile pour arriver à mon propre composant.
Build a Reusable Graphical Charting Engine with C#

Conclusion

On trouve beaucoup de librairies .NET de Charts sur le web, mais beaucoup sont payantes, certaines reposent sur l’infâme controle ActiveX d’Office, difficilement réutilisable… J’espère avoir pu montrer toutes les possibilités offertes par les librairies gratuites, ainsi que la possibilité de construire sa propre librairie facilement.

Configurer son DNS avec BIND

Ceux qui font un peu d’administration serveur ont du se perdre assez fréquemment dans les méandres de BIND et des configurations DNS. Ce long tutorial, trouvé sur Howtoforge, vise à tout reprendre de zéro, et à faire réellement comprendre la manière dont le système DNS fonctionne. Après cette lecture, au moins, on sait ce que l’on fait quand on configure BIND, ce qui est très agréable.

Traditional DNS Howto

Javascript - un problème de poids

Comme vous l’avez remarqué, j’utilise beaucoup Javascript en ce moment… et comme tous les utilisateurs de librairies complexes, je me suis trouvé confronté au problème du poids des scripts. Une bonne librairie Javascript peut faire parfois jusqu’à 200 Ko, ce qui prend plus d’une minute à charger pour une connexion 56K.

Ce billet présente quelques méthodes et conseils pour minimiser ce problème.

Le cache

La première astuce, évidemment, est d’utiliser au maximum le cache du navigateur. Après tout, un gros CSS peut aller jusqu’à 20-30 Ko, mais il n’est chargé que lors de l’affichage de la première page du site - pour les pages suivantes, la version en cache est utilisée.

Il peut donc être au final rentable d’utiliser une librairie lourde, mais complète. On la charge ainsi en première page, cela prend un peu de temps, mais ensuite elle sera réutilisée tout au long du site. Deux inconvénients cependant : le Javascript doit être parsé par le navigateur à chaque page, même s’il n’est plus téléchargé, ce qui prend du temps ; de plus, si la première page ne s’affiche pas rapidement, le visiteur peut être tenté d’aller voir ailleurs.

La compression

Une autre idée est de compresser les fichiers Javascript. Il ne s’agit pas ici d’une compression ZLIB ou autre, mais d’une réduction de la taille du code, tout en le conservant sous forme de texte. La plupart des compresseurs Javascript enlèvent les commentaires, les espaces inutiles et les sauts de ligne ; certains, plus avancés, renomment les variables internes, pour gagner encore un peu de place. Un bon compresseur peut parfois diviser le poids d’un gros fichier Javascript par deux.

Le meilleur compresseur Javascript est sans doute ShrinkSafe, par l’équipe de Dojo. Il est basé sur un interpréteur Javascript, et non pas sur des expressions régulières plus ou moins hasardeuses, comme beaucoup d’autres compresseurs. En utilisant ShrinkSafe, j’ai par exemple fait passer la totalité du code de script.aculo.us de 171 Ko à 99 Ko, ce qui est extrêmement appréciable, en particulier pour les 56K.

Utiliser des librairies légères

Identifier précisément ses besoins permet d’utiliser la bonne librairie, et donc d’adapter le poids du Javascript. Si vous envisagez de bâtir un site faisant appel à des effets visuels riches et à des requêtes Ajax fréquentes, l’utilisation du couple script.aculo.us/prototype est tout à fait envisageable, pour les raisons de cache exposées ci-dessus. En revanche, si vous ne voulez intégrer que quelques effets simples à un endroit précis, ou seulement une requête Ajax particulière, il est inutile de forcer le téléchargement d’une librairie complète.

Moo.fx est une librairie d’effets graphiques de 3 Ko seulement. Elle permet d’utiliser des effets de redimensionnement et de fondu, de les combiner, et de les implémenter facilement. Il devient donc tout à fait enviseagable d’intégrer des effets visuels à une page seulement : moo.fx se charge aussi rapidement qu’une petite image. Elle n’est de plus pas compressée, on peut donc réduire encore un peu sa taille en utilisant ShrinkSafe. Son seul point faible est le manque d’exemples, la documentation est en revanche assez complète.

Conclusion

En résumé, l’utilisation d’un compresseur Javascript permet de diminuer le temps de chargement des librairies Javascript. Après, si l’on compte utiliser intensivement effets et Ajax, mettre en cache une librairie complète est une bonne idée ; pour des effets poncutels, il vaut en revanche mieux adopter une librairie légère, comme Moo.fx.

Apple lance Boot Camp

Boot Camp permet donc, officiellement et facilement, d’installer Windows XP sur un Macintel. D’aucuns pensent que c’est la ruine de Mac OS X, car les logiciels ne seront plus portés sur Mac, d’autres y voient au contraire enfin une possibilité de switcher en douceur.

La meilleure réaction que j’aie lu à ce sujet est sans doute celle de Daniel Glazman, qui se dit enfin « converti » … Je pense que je vais faire comme lui ; à moi le MacBook Pro !