CSS et standards
CSS et standards
Tous les billets sont listés ici et classés par titres et mois dans la boîte Archives.
Les illustrations commises par Eric Feng sont éblouissantes : ce visionnaire crayonne tout un peuple de créatures, translucides et filiformes, nées de la greffe heureuse d'éléments proprements technologiques - rouages, cables, mécanismes variés - sur des corps naturels, bien qu'irréels et fantasmagoriques.Son site, en Flash, leur donne vie et c'est un régal pour les mirettes... PngFactory est une splendide banque d'icones au format *.png. Les icônes, au nombre de 2090 à ce jour, ont été réalisées par les membres de CustomXP.net et sont souvent de très belle qualité.
Comme le rappellent les Conditions d'utilisation, les images disponibles sur le site sont mises à la disposition des visiteurs pour une utilisation personnelle, dans le cadre de la vie privée et éventuellement d'internet (avatars, signatures par exemple). Toute utilisation sortant de ce cadre (ex : site internet personnel ou amateur, support papier, vêtements, etc...) devra faire l'objet d'une autorisation préalable de l'auteur, être assortie des mentions de copyright, ainsi que d'un lien vers PngFactory. Aucune utilisation à des fins commerciales n'est autorisée, sauf mention contraire.
Vous n'aurez pas manqué de remarquer, dans le coin supérieur gauche de votre écran, l'apparition du macaron "Trop bien pour Internet Explorer". Un clic de mulot sur celui-ci vous conduira sur cette page, qui affiche une bonne parole militante et authentique : "Le site que vous tentez d'afficher a été jugé trop bien pour Internet Explorer", suivie d'une in[v/c]itation à découvrir d'excellents navigateurs alternatifs à IE, au premier rang desquels Firefox , bien entendu, mais aussi Opera, Safari , Camino ...La campagne "Too cool for IE" a été lancée par Paul Arms, sur son blog, dans le but d'inciter les utilisateurs d'IE à essayer d'autres navigateurs que celui qui est installé d'office sur leur ordinateur. Des traducteurs se sont ensuite affairés pour que la page initiale de la campagne, en anglais, soit traduite en six autres langues, afin que le message soit diffusé le plus largement possible.
Vous trouverez sur le site du matériel pour "rendre votre site trop bien pour IE", en affichant dans son coin inférieur droit, une des images du dispositif. Vous pouvez télécharger ces dernières au format *.png, prêtes à l'emploi, ou télécharger leurs sources Photoshop, pour les retravailler à votre convenance. Versez ensuite l'image sélectionnée dans le répertoire img/ de votre site. Le site fournit ensuite la CSS à ajouter à celle de votre site (légèrement modifiée pour GuppY) :
a#tooCool {
position: fixed;
right: 0;
bottom: 0;
display: block;
height: 80px;
width: 80px;
background: url(img/too_cool.png) bottom right no-repeat;
text-indent: -999em;
text-decoration: none;
}ainsi que le code HTML à insérer dans inc/hpage.inc, juste après la balise <body> :
<a id="tooCool" href="http://www.w3junkies.com/toocool/">
Trop bien pour Internet Explorer
</a>
Malheureusement, autant le résultat est nickel sous Firefox, autant l'affichage est foireux sous... IE. Dans ce cas, il existe deux solutions :
- La première consiste à utiliser les commentaires conditionnels, pour empêcher l'affichage du macaron si le navigateur du visiteur est IE. Mais le but de la campagne, qui consiste à encourager les utilisateurs d'IE à découvrir d'autres navigateurs, est alors, disons... manqué.
- L'autre solution est celle pour laquelle j'ai opté, après l'avoir vue à l'oeuvre sur Firecat : elle consiste à afficher le macaron dans le coin supérieur gauche du site, en insérant simplement ce fragment de code dans inc/hpage.inc, juste après la balise <body> :
<a href="http://www.w3junkies.com/toocool/" title="Ce site est trop bien pour IE !">
<img src="<? echo CHEMIN; ?>img/too_cool.gif" alt="Trop bien pour IE" style="position:absolute; left:0px; top:0px;" />
</a>
Vous aurez au préalable placé l'image too_cool.gif dans le répertoire img/ de votre site.
Je découvre, tardivement il est vrai, les possibilités offertes par la balise <object>, pour insérer des fichiers autres que du son ou de la vidéo, notamment des fichiers texte, des CSS, des pages *.php ou *.html.Cette page rassemble 5 exemples, commentés et assortis du code correspondant, d'insertions réalisées avec cette balise. Il semblerait néanmoins que, comme d'habitude, IE sucks... En revanche, avec Firefox, c'est une géniale alternative aux iframes, dont l'usage est contesté. Des fans de Saute-Mou' ont jugé bon de taguer son nom sur les murs de la capitale, à l'occasion de son anniversaire :
La vérité, c'est que j'ai joué comme une gosse avec le GraffitiGen, un générateur gratuit de graffitis en ligne, et avec le filtre brique de Photofitre. Comme si je n'avais pas de copies à corriger...
Jolie arabesque, hein ? Vous pourrez créer semblables orientales volutes grâce à la magique applet "Grappa White" de Paul Schmidinger. Il y avait longtemps que je ne m'étais plongée dans la lecture d'une (si possible bonne) BD. Avec Les Carnets de Bord du paranoïde Lewis Trondheim, publiés dans la remarquable collection "Côtelette" de L'Association, je ne courais aucun risque : le catalogue de L'Association est un bijou à lui seul, alors les titres, vous pensez bien...
Dans Les Carnets, Trondheim raconte en images garanties "sans crayonnés, sans tippex ni retouches orthographiques" des tranches de sa vie : un festival à Angoulême placé sous le signe de la gastro, de diluviennes vacances espagnoles ou encore l'odyssée d'un déménagement. Les Carnets sont une savoureuse trouée autobiographique, à la faveur de laquelle l'auteur de Lapinot et les carottes de Patagonie s'écorche sans concession.
Cliquez pour voir une planche extraite de la série
revêt ce soir ses beaux atours à paillettes, car j'ai la joie de célébrer, avec un peu de retard, l'anniversaire de sa première année d'existence et de lui (me ?) souhaiter un
Merci au rigolo GlitterMaker pour avoir sponsorisé l'événement et revêtu Saute-Mou' de si-chics-strass-en-toc ! BannerBreak est un excellent générateur de bannières - voire, sans doute, le meilleur que j'aie croisé sur la Toile.
Ce générateur, totalement gratuit mais envahi de pubs, a, sur les autres générateurs du même type, l'avantage de proposer un large choix de modèles entièrement préparamétrés, qui assortissent avec goût le style de la police, les couleurs de la bannière, les couleurs des textes et l'image utilisée. On peut toutefois personnaliser ces modèles, via un pannel de réglages avancés, et modifier leurs paramètres, qu'il s'agisse des couleurs, de la police utilisée, de l'ombre portée, etc. Mais franchement, les modèles préparamétrés sont d'excellente facture ; en témoignent ces quelques bannières, générées sur BannerBreak :
Modèle : Factory
Modèle : Force
Modèle : Simplistic
Modèle : Red Tech
Modèle : World War
Une trentaine d'autres bannières sont visibles dans la rubrique BannerBreak de la Chambre Obscure, avec le nom du modèle correspondant. Merci à Franck qui m'a envoyé ce petit test, à faire sur Google :
- Entrez le mot failure (qui signifie "raté", en anglais) dans le champ de recherche
- Pressez sur le bouton J'ai de la chance
- Ricanez doucement...
Plus d'infos sur Webrankinfo L'an passé, j'ai fait écrire des contes à mes élèves de 6ème, à partir d'une feuille de route (un guide et un canevas) et d'une feuille d'ingrédients, pour qu'ils ne soient pas trop perdus dans la rédaction d'un texte un peu long. Voici le conte écrit par Laniya en juin 2005. Je l'ai corrigé deux fois ; Laniya l'a consciencieusement repris et amélioré ; aussi n'ai-je corrigé ce soir que quelques rares fautes d'orthographe. Laniya, j'ai l'immense joie de la retrouver cette année en 5ème. Ce soir, en relisant son conte, je me suis souvenue que je fais le plus beau métier du monde.
Nez pointu
Il était une fois une princesse qui s'appelait Paillette, mais personne ne l'appelait par son nom. En effet, on la surnommait "Nez Pointu", car elle avait le nez pointu. Paillette avait aussi de longs cheveux blonds qui pouvaient retrouver des objets. Elle vivait seule dans son palais. Elle était très belle, belle comme le jour. Son seul défaut, c'était son nez pointu. Aucun prince ne voulait l'épouser.Un jour, Paillette en eut assez de son nez pointu ; elle alla voir une fée et lui demanda de l'aider. La fée l'envoya retrouver un magicien, nommé Abrax, qui habitait dans un palais, dans une forêt :
"- Le magicien pourra t'aider, Paillette, pour ton nez pointu, lui dit la fée."
Ainsi, Paillette se mit en chemin.
Un matin, Nez Pointu rencontra sur sa route un bûcheron. Celui-ci se lamentait car il avait perdu sa hâche et sans elle, il ne pouvait plus couper d'arbres. Alors Paillette retrouva sa hâche à l'aide de ses longs cheveux blonds.
Pour la remercier, le bûcheron lui remit une formule étrange. Cette formule étrange servait à détruire des monstres, des animaux, des dragons, des sorciers, des sorcières, des ogres et beaucoup d'autres créatures. Il expliqua à Paillette comment se servir de la formule en disant :
"- Tu dois lire cette formule sans te tromper à haute voix, pour te débarrasser d'une créature, résoudre une énigme ou retrouver des objets égarés. Tu vas en avoir beaucoup besoin lors de ton trajet."
Alors Paillette remercia infiniment le bûcheron pour la formule, avec une joie énorme. Puis la princesse fit ses adieux au bûcheron et reprit sa route.
Pendant un long moment, elle ne rencontra personne.
Un soir, elle arriva enfin dans une forêt enchantée. Cette forêt était magnifique, avec des arbres partout, remplis de fruits et de fleurs magnifiques dans tous les endroits. Il y avait des petits lutins qui cueillaient des fleurs. Nez Pointu ne voyait ni maison ni palais à l'horizon. Elle demanda donc à un lutin s'il y avait un palais dans cette forêt. Le lutin lui répondit qu'il y en avait bien un, mais qu'il était très loin dans la forêt.
Paillette se mit en route.
C'est alors qu'elle se retrouva nez à nez avec un ogre qui était tout gluant, grand et tout sale. Cet ogre lui dit :
"- Pour passer, tu dois me battre !"
Heureusement, Nez Pointu possédait la formule étrange que lui avait remis le bûcheron. Alors, elle lut la formule à haute voix et l'ogre disparut aussitôt. Nez Pointu partit sans demander son reste.
Après quelque temps, elle arriva un peu plus loin dans la forêt enchantée. La forêt avait un peu changé entre temps. Il n'y avait pas beaucoup d'arbres avec des fruits, ni de fleurs, ni de lutins.
C'est alors que Nez Pointu se retrouva nez à nez avec un dragon qui était très grand, vert et avait de grandes griffes. Ce dragon lui dit :
"- Tu pourras continuer ta route, mais d'abord il faudra que tu résolves une énigme !"
Heureusement, Paillette avait la formule étrange que lui avait remise le bûcheron. Alors, elle lut la formule à haute voix pour résoudre l'énigme. Puis elle prit ses jambes à son cou.
Après quelque temps, elle arriva encore plus loin dans la forêt enchantée, qui était de plus en plus bizarre. Il n'y avait plus qu'un seul arbre et qu'une seule fleur.
C'est alors que Nez Pointu se retrouva nez à nez avec un aigle noir qui était très grand et très gros. Cet aigle lui dit :
"- Pour passer, tu dois retrouver le collier rare de ma femme, qui est très difficile à retrouver."
Heureusement que Paillette avait la formule étrange que lui avait remise le bûcheron ! Elle lut la formule à haute voix pour retrouver le collier rare. Elle le rendit à l'aigle noir qui la laissa passer, conformément à ce qu'il avait promis. Et Nez Pointu fila plus vite que le vent.
Mais, dans sa course, elle perdit la formule étrange.
Enfin, Paillette aperçut un palais au loin. Elle était presque au bout de ses peines, mais avant d'aller voir le magicien, elle devait encore affronter une créature maléfique en duel. Nez Pointu se demandait cependant comment elle allait bien pouvoir faire sans l'aide de la formule étrange...
Alors qu'elle se lamentait sur son sort, elle vit soudain apparaître le bûcheron qu'elle avait déjà rencontré. Celui-ci lui dit doucement :
"- Attends, je te prête ma hâche. Elle t'aidera à te débarrasser de cette créature !"
Puis le bûcheron prêta sa hâche à Paillette. Cette dernière coupa la tête de la créature avec et elle réussit ainsi à la vaincre.
Abrax le magicien put finalement arranger le nez de Paillette. Celle-ci se tourna alors vers le bûcheron et lui demanda, avec une énorme joie :
"- Voudrais-tu m'épouser ?
- Oui, je voudrais bien t'épouser !"
Ils se marièrent et eurent plein d'enfants. Plus personne n'appelait Paillette par son vilain surnom et ils vécurent heureux. Arbre : n. m. Compagnon à feuilles.
Si, par hasard, vous aviez aussi envie de regarder pousser un arbre, rendez-vous sur cette page, sur laquelle j'ai installé la splendide applet "Tree" de Paul Schmidinger, qui permet de générer une représentation assez réaliste des compagnons feuillus de nos forêts. Photographiez votre arbre, envoyez-le moi et je l'ajouterai à la forêt de Saute-Mouton ! J'ai craqué pour cette applet rigolote, concoctée par Paul Schmidinger et téléchargeable sur son site, qui en propose de nombreuses autres, absolument superbes, soit en démonstration, soit en téléchargement.
Et puis comme les fêtes de fin d'année approchent, avec leurs strass brillant de mille feux, voici une autre belle applet de Paul Schmidinger, qui permet de dessiner des formes avec un pinceau à paillettes.
Slawesome (à prononcer comme "awesome", ce qu'il est) est un service de messagerie vocale que je viens d'adopter avec enthousiasme et qui permet de composer, d'envoyer et de recevoir des emails vocaux.L'interface de gestion est basique, bien que délicatement ouvragée, vêtue d'une CSS du bleu aérien le plus nuageux ; quant au mode d'emploi, il est d'une redoutable simplicité : après avoir saisi l'adresse du destinataire et renseigné le sujet du message, on enregistre jusqu'à 2'22 de blabla, auquel on peut attacher, le cas échéant, une note écrite. Pour finir, on presse le bouton d'envoi et, dans les minutes qui suivent, le correspondant est averti par mail qu'un enregistrement est à disposition de ses chastes oreilles à l'adresse indiquée.
L'enregistrement et l'écoute des messages nécessitent 1. que le plugin Flash soit installé et activé sur l'ordinateur 2. que l'ordinateur soit équipé d'un micro.
Naturellement, les messages sont privés, mais on peut aussi, optionnellement, décider de les rendre publics, auquel cas ces derniers sont ajoutés au Podcast Slawesome. Chaque utilisateur dispose par ailleurs du fil RSS de ses propres enregistrements publics, qu'il peut afficher sur son site, heureux de s'adonner aux joies de l'audioblog à moindre frais : en effet, pour le moment Slawesome est un service gratuit et sans publicité. Toutefois, une version premium payante, offrant des possibilités de stockage plus importantes, est à l'étude, en cas d'engouement forcené. Notons enfin que le service en est à ses balbutiements, qu'il est en version alpha, mais je n'ai relevé pour ma part ni dysfonctionnements ni pannes depuis que je l'utilise. Aussi, dois-je dire, pour conclure, que je suis passablement conquise !
Ecoutez donc la version audio de ce billet (ou démonstration de Slawesome par l'exemple... )
Novembre 2004
Novembre 2004
![[PDA, Palm, mobiles, Lynx]](inc/img/general/pocketpc.gif "PDA, Palm, mobiles, Lynx")
![[I-Mode]](inc/img/general/imode.gif "I-Mode")
![[Valid XHTML 1.0]](inc/img/general/valid-xhtml.png "Valid XHTML 1.0")
![[Valid CSS]](inc/img/general/valid-css2.png "Valid CSS")
![[Valid RSS]](inc/img/general/valid-rss.png "Valid RSS")
![[Spam poison]](inc/img/general/spam-poison.png "Spam poison")
![[Votez pour Saute-Mouton au classement GuppY-Top]](inc/img/general/guppytop.png "[Votez pour Saute-Mouton au classement GuppY-Top]")
![[X-Stats]](inc/img/general/xstats.png "X-Stats, mesure d'audience de sites Web par Qualicomm")