10 liens pour faire plaisir à votre intégrateur web

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

10 liens pour faire plaisir à votre intégrateur web

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

  • jLoupe-jQueryjQuery 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

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



24 commentaires pour “10 liens pour faire plaisir à votre intégrateur web”

  1. [...] This post was mentioned on Twitter by Erick and bruno b. css4design. bruno b. css4design said: [billet] 10 liens pour faire plaisir à votre intégrateur web http://bit.ly/qLpQ3 [...]

  2. Kynerion dit :

    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. :)

  3. arnaud-k dit :

    Sympa l’article, j’ai surtout bien aimé le ‘Ultimate IE6 Cheatsheet’.

    Et, by the way, merci pour le lien vers mon blog ;)

  4. Somebody dit :

    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.. ?!

    • sajoo dit :

      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 ;)

  5. Jon Phillips dit :

    Hey Bruno, merci beaucoup pour le lien vers SpyreStudios, je suis en bonne compagnie. C’est très apprécié :)

  6. Salut Bruno Merci pour ces liens. J’aime beaucoup la loupe. Je compte l’utiliser prochainement

  7. [...] 10 liens pour faire plaisir à votre intégrateur web [...]

  8. Murat dit :

    Merci pour le plugin wordpress Adminer, très utile !

  9. [...] This post was Twitted by JustWebDesignFr [...]

  10. Auré dit :

    Merci pour tous ces bons liens !

    IE6 Ultimate cheatsheet : génial. validateur multi-pages : très efficace.

  11. Aden Foncier dit :

    Merci pour cette liste de ressources, pour le javascript, il existe le framework Mootools qui est très simple à utiliser : http://mootools.net

  12. eBay dit :

    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.

  13. Pierre dit :

    Excellent l’affichage des miniatures ! Merci beaucoup pour le lien.

  14. r4i dit :

    mer ci pour tout ces liens bien utiles.

  15. Psi dit :

    Cette liste est bien utile, je ne les connaissais pas tous, merci du partage ;)

  16. Merci pour ce bel article, moi j ai gardé en favoris le validateur et les méthodes de contournement pour IE6

  17. Parquet Mag' dit :

    Je ne connaissais pas tout. Y a de vrais bonnes choses là dedans comme l’affichage de miniatures, alors merci !

  18. fff.fr dit :

    Merci pour ces ressources sur ce outils qui s’avèrent effectivement très pratiques.

  19. pps dit :

    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 :)

  20. [...] 10 liens pour faire plaisir à votre intégrateur web — Générateur de miniatures pour WordPress, valider votre site, gérer votre base de données, des plugins jQuery. [...]

  21. 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 !

  22. bwin dit :

    Excellent article, merci pour les informations qui sont très utiles.

  23. Bruno Bichet, intégrateur HTML & CSS dit :

    Cool, et tu l’a placé où le fichier .htaccess ?

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site