Cette liste de ressources devrait rendre de grands services à l’intégrateur HTML & CSS ainsi qu’au développeur web. en effet, vous y trouverez : un générateur de miniatures pour la page d’accueil de votre blog WordPress ; des outils pour valider l’ensemble de votre site ; un fichier PHP pour gérer votre base de données et des plugins jQuery tous plus intéressants les uns que les autres, etc. Il s’agit du meilleur des bons plans que je propose sur mon compte Twitter integrateur_css. Stay tuned and mind the gap!
WordPress : redimensionnez et affichez une miniature à partir des images de vos articles
Je vous ai parlé dernièrement (dans les bons liens WordPress) du script `get_post_images()` associé à la fonction `first_thumbnail()` pour afficher une miniature en homepage, par exemple, en prenant la première image d’un article. Mehdi Kabab vient d’apporter une amélioration substantielle à la fonction first_thumbnail() pour prendre en compte le script timthumb qui permet de générer une miniature aux dimensions que vous voulez (via la bibliothèque graphique GD) plutôt qu’un redimensionnement HTML lourd de conséquence sur le poids de votre page d’accueil.
Vous pouvez voir cette petite merveille en action sur la page d’accueil de ce blog : les miniatures sont redimensionnées et affichées grâce à cet ensemble de fonctions. Pour les souhaits et surtout les remerciements c’est par ici que ça se passe 😉
Pages web et bases de données
– Validateur — Validez votre site Web en entier grâce à l’outil de validation multipages (via truffo). Ce service est développé et maintenu par le Réseau Proze et s’appuie sur le service de validation du W3C qui détient les droits d’auteur de son service.
– Adminer — est un outil tenant en un seul fichier PHP qui permet de gérer une base de données MySQL à la manière d’un phpMyAdmin light. Existe également sous forme de plugin pour WordPress.
– Firebug Lite — Ce simple fichier Javascript — disponible sous forme de bookmarklet — va superposer l’essentiel des commandes de Firebug à la page en cours.
Javascript et plugins jQuery
– jQuery Magnifier Loupe — propose un zoom pour vos images. Utilise intelligemment la propriété longdesc
pour zoomer à partir d’une miniature (thumbnail). Il reste possible de « fabriquer » la miniature avec les propriétés HTML `width` et `height`. (via Amicalement Web).
Attention tout de même au caractère peu accessible de cette solution basée sur l’attribut HTML `longdesc` qui permet de fournir une description de l’image pour les malvoyants comme me le rappelle Sébastien Delorme sur Twitter ici, ici et ici 😉
Cela dit, le script ne nécessite pas obligatoirement l’attribut `longdesc` pour fonctionner ; il est possible de déclencher la loupe en utilisant la classe jLoupe sur l’élément `img` concerné !
– qtip jQuery Plugin — Sans doute la solution ultime pour gérer les info-bulles (tooltips) : cross browser, dégradation gracieuse, coins arrondis personnalisables, positionnement facile, effets personnalisables, AJAX, etc. (via arnaud-k)
– Vanadium — Validation et vérification des champs d’un formulaire à l’aide de l’attribut class
. Par exemple : « pour un champs requis ou « pour un champs qui doit recevoir la chaine de caractère vanadium. Possibilité de valider via AJAX avec « par exemple.
Quelques trucs pour vos CSS
– 21 polices de caractères à intégrer avec `@font-face` — Cette propriété CSS2 permet d’incorporer les informations vectorielles relatives à une fonte dans votre page web sous la forme `@font-face { font-family: GraublauWeb; src: url(« path-to-the-font-file/GraublauWeb.otf ») format(« opentype »); }` à utiliser ensuite comme suit : `h1 { font-family: GraublauWeb, Helvetica, Verdana, Sans-Serif; }`
– Ultimate IE6 Cheatsheet 25+ hacks et contournements pour faire sa fête à IE6 — Avec des parts de marché estimées à 18% ou 25% selon les sources, l’intégrateur web doit encore se coltiner avec le dernier de la classes des navigateurs.
Miscellanées
– A l’occasion du Last Call pour l’écriture des spécifications pour HTML5, Florent V. répond à nos questions sur les différents `DOCTYPE` et autres types `MIME` qui peuplent la jungle du développement web. Des réponses synthétiques seront publiées dans le courant de la semaine prochaine.
Très bon Timthumb, j’ai enfin réussi à le faire fonctionner et à le mettre en cache ( http://code.google.com/p/timthumb/source/browse/trunk/.htaccess ) couplé au script de piouPiouM c’est du bonheur. Merci. 🙂
Sympa l’article, j’ai surtout bien aimé le ‘Ultimate IE6 Cheatsheet’.
Et, by the way, merci pour le lien vers mon blog 😉
Parce qu’on en a marre de IE6, arrêtons d’utiliser des hack pour IE6, sinon pourquoi changer de navigateur si ça fonctionne sous IE6.. ?!
Pour IE6 j ai pris le parti de rediriger tous mes internautes vers une page leur expliquant qu ils utilisent un navigateur obsolète et les risques liés a l utilisation de celui ci 😉
Hey Bruno, merci beaucoup pour le lien vers SpyreStudios, je suis en bonne compagnie. C’est très apprécié 🙂
Salut Bruno
Merci pour ces liens. J’aime beaucoup la loupe. Je compte l’utiliser prochainement
Merci pour le plugin wordpress Adminer, très utile !
Merci pour tous ces bons liens !
IE6 Ultimate cheatsheet : génial.
validateur multi-pages : très efficace.
Merci pour cette liste de ressources, pour le javascript, il existe le framework Mootools qui est très simple à utiliser : http://mootools.net
Bouh je vien d’apprendre que je fais partie des 19% de boulets qui ont encore IE6 🙁
Mais j’ai aussi Firefox, j’ai bon la ! 🙂
Sinon merci pour ces petites astuces.
Excellent l’affichage des miniatures ! Merci beaucoup pour le lien.
mer ci pour tout ces liens bien utiles.
Cette liste est bien utile, je ne les connaissais pas tous, merci du partage 😉
Merci pour ce bel article, moi j ai gardé en favoris le validateur et les méthodes de contournement pour IE6
Je ne connaissais pas tout. Y a de vrais bonnes choses là dedans comme l’affichage de miniatures, alors merci !
Merci pour ces ressources sur ce outils qui s’avèrent effectivement très pratiques.
C’est très bien ces miniatures mais je suis en train de chercher un système (cms) pour faire migrer mon site dédiés aux pps. Il mefaudrait du coup un système de vignette dont le lien envoie directement sur le pps 🙂
C’est vrai que ce sera moins lourd que un simple redimensionnement en html ^^ Par contre depuis l’apparition du jQuery, ca sauve pas mal de monde 🙂 C’est bien plus SEO friendly qye le javascript et bien moins lourd que du flash. Génial pour des galeries de miniatures ou des effets de loupe sur une image 😉 Merci encore pour ces ressources !