Dans la série « outils blindés pour rentrée chargée », allons à l’essentiel avec des signets en rang par deux (tout en anglais).

Le premier c’est le css playground de Stu Nicholls (http://www.cssplay.co.uk/) qui expérimente et livre les secrets de ses dessins réalisés sans images, entièrement rédigés en CSS. Sans doute utile pour les interfaces des prochains trimestres (ah ! les coins arrondis sans gif !). Tout y est classé, expliqué.

Le second permet de résoudre… tous les autres problèmes :-) Le web developer’s handbook est un annuaire des ressources pour le développement et le design web classées par genre. J’ai vérifié certaines d’entre-elles, je confirme leur qualité et elles étaient déjà dans mes bookmarks. Microscopique, multicolonné, exhaustif : son auteur, le journaliste biélorusse Vitaly Friedman, devait être très fort à l’école pour confectionner des antisèches de compétition. Si quelqu’un connaît un travail comparable avec des ressources francophones…

Allez voir cette page (vous revenez, après, hein ?). Vous avez remarqué ? Ben oui, Flash pourrait enfin servir à quelque chose d’autre qu’à exaspérer ou harceler les utilisateurs du web !

Ceux qui souhaitaient utiliser des polices de caractères autres que les traditionnelles et obligatoires Verdana, Arial, Helvetica, Georgia, Times dans leurs pages web ne pouvaient le faire qu’en les pixelisant (en les transformant en images), perdant du coup tous les avantages du texte (recherche, sélection, indexation). De vieilles technologies comme les webfonts permettent certes d’inclure des polices dans les pages, mais elles sont si tordues et si propriétaires (l’une par microsoft pour internet explorer seulement, et l’autre par Bitstream si je me souviens bien pour Netscape seulement) qu’elles ont été de fait délaissées et abandonnées des designers.

sIFR que je viens de découvrir, utilise une combinaison astucieuse de CSS, javascript et Flash pour afficher dans les pages web du vrai texte, dans les polices choisies, avec quelques avantages, comme la compatibilité avec « tous » les navigateurs (de Konkeror à Opéra en passant par Firefox, et IE), la possibilité de sélectionner et rechercher dans le texte – puisque c’est du vrai !- et la possibilité d’afficher la page avec les polices par défaut du web en cas d’absence de plug’in flash (une absence rare, mais qui devient plausible face à l’agression publicitaire permanente qui s’appuie sur cette technique). Bref, des pages personnalisées, valides, accessibles, et jolies 100% pur texte, comme on aime.

Je n’en dis pas plus, on peut tout savoir et voir des exemples sur le site de sIFR http://www.mikeindustries.com/sifr/ en lisant bien la documentation en ce qui concerne l’utilisation des polices protégées par copyright. Les outils sont téléchargeables et une bibliothèque de polices sIFR libres et prêtes à l’emploi est disponible ici : http://www.fontsmack.com/resources#sifr .

Une limite toutefois, les pages semblent un peu lentes à l’affichage, ce ne sont pas les masses de données qui transitent par le réseau, mais les calculs un peu complexes demandés au navigateur qui en sont la cause. Mike Davidson, à l’origine de cette initiative, recommande d’ailleurs de limiter leur usage aux titres. Surtout-surtout, si vous testez, racontez-moi !

En tout cas, voici une occasion (elles sont rares) de revenir sur les 25 raisons de dire non à flash de Patrick Murris ;-)

La simplicité d’écriture et les possibilités de CSS sont vraiment appréciables et on peut mesurer cette année le tournant que cela représente pour le web. L’adoption de CSS est faite, grâce aux blogs et à quelques bons auteurs, reste la vulgarisation, qui est en cours. Enfin les navigateurs respectant les standards s’affirment, avec de vraies possibilités de séparation du contenu et de la forme et surtout un contrôle sympathique de la typographie et des blancs. Mais les navigateurs ont un retard vraiment important, qui se remarque cruellement aujourd’hui. Comment faire pour anticiper quand on est très très impatient ? On en parle ici… J’ai eu la semaine passée l’occasion de creuser vraiment et de mettre en oeuvre les propriétés CSS destinées aux « médias paginés », soit le papier. CSS1 est bien toléré par les navigateurs, les dessins de page sans tableaux sont tout à fait possibles à condition de faire quelques contorsions bien connues pour IE (je les pratique, même si ce site n’a pas été conçu avec, si j’ai le temps je le réécrirai :-). CSS2 presque implémenté et CSS3 (nécessaire) n’est pas encore affichable. Or les propriétés pour les médias paginés prennent vraiment de l’ampleur avec CSS3. Comment faire pour anticiper quand on est très très impatient ?

De vraies pages

D’abord, il y a les propriétés liées au papier et donc à la page comme page-break permettent de contrôler en les autorisant ou les interdisant les sauts de pages. Les « règles-at » (comme @page @top @bottom) avec la propriété « content » font des miracles pour les en-tête et pied de page, avec même la possibilité d’insérer des numérotations assez élaborées, des titres courants et des contenus variables. De même les pages peuvent avoir des modèles différenciés (tout est ici au W3C. Problème : aucun navigateur, pas même firefox, n’interprète correctement ces instructions. Heureusement, pour les médias paginés il y a le logiciel à a ligne de commande Prince, qui génère un pdf conforme à CSS3 (attention, il ne le fait que si la page est rédigée en xhtml strict!).

Bref, il ne manque « plus » pour faire notre bonheur de metteurs en page et en écran lassés des mauvais outils édités par Adobe que le vrai multicolonnage, la césure et justification et une rotation par degrés pour composer des documents multi-supports vraiment simplement. En attendant on bricole encore sur ces points. Mais ça se précise. On peut donc envisager d’attaquer CSS3.

C’est une question de navigateurs plutôt que de recommandation, ceux-ci sont vraiment à la traine. Une première adresse pour tester une page sous tous les navigateurs et IE puis la modifier le cas échéant sans avoir à donner d’argent à Microsoft : Browsershots.

Ici, on trouve aussi une librairie javascript qui permet d’anticiper en utilisant les propriétés de CSS3 associées au multicolonage. C’est impressionnant et si on hésite à le mettre en place si tôt, peut-être que le fait que le Herald Tribune l’ait mis en place sera encourageant ! (sur ce site, sélectionner un article pour voir la composition multicolonnée).

Bref, de quoi ne pas trop s’impatienter et expérimenter…