En utilisant un excellent tutoriel sur les Image
Map de Stu
Nicholls, dont j’ai déjà parlé dans ces
colonnes,
j’ai implémenté un site composé uniquement d’images et de zones
réactives sur celles-ci, avec apparition de texte au survol, le tout en
pur XHTML/CSS. Le tutoriel permet de ne pas se perdre et d’être sûr de
fonctionner sous Internet Explorer.
Mais un autre point du cahier des charges était l’apparition de blocs de
texte lors du clic, en plus du survol. Une solution est de faire un
lien vers une page quasiment identique, mais comportant le bloc de
texte ; ce n’est pas très élégant. J’ai donc utilisé les pseudo-classes
CSS :active et :focus sur les zones réactives pour faire apparaître
les zones de texte lorsque que les liens ont le focus - c’est à dire
qu’ils ont été cliqués ou activé. La contrainte sur le XHTML est que
tout le contenu texte du bloc à faire apparaître doit être contenu dans
le lien réactif, il faut donc n’utiliser que des éléments inline. Mais
au final, l’effet obtenu est assez réussi, le code élégant et surtout
léger.
Quelques problèmes rencontrés néanmoins : les utilisateurs d’Opéra
doivent maintenir le bouton de la souris appuyé pour voir le texte, à
cause d’une bizarrerie de comportement de ce navigateur qui prend très
mal en compte les liens actifs ; à noter également que les navigateurs
Gecko 1.7 (comme Firefox 1.0*) n’affichent pas le texte lorsque l’on
clique sur le texte de la zone réactive, il faut cliquer dans la zone
mais pas sur le texte - ceci a été résolu dans Gecko 1.8 (et donc
Firefox 1.5*). Tous ces comportements étranges peuvent sans doute être
corrigés à l’aide d’un brin de Javascript non-obtrusif. Edit: C’est
même un peu plus qu’un brin, mais le Javascript a été rajouté ; il
dégrade sur la version “full CSS” si JS n’est pas activé.
Vous pouvez regarder le produit fini sur
pourquoitucours.fr. Je requiers
néanmoins votre indulgence car le site a été réalisé en très, très peu
de temps ;)
Edit: Le site a depuis été remplacé par une autre version, réalisée
par un autre développeur. Le lien donné n’a plus rien à voir avec moi,
donc.
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 !
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.
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
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.
