Outils en ligne

• PunyPNG — Réduit le poids des fichiers PNG, JPEG et GIF
• Smush.it — Compresse les images au format PNG

Logiciels à installer

ScriptPNG et ScriptJPG sont des logiciels pour Windows 32 bits permettant d’optimiser les fichiers images en utilisant différents niveaux de compression pour réduire la taille des fichiers :

• ScriptPNG convertit les formats GIF, BMP, JPG, PCX, ou TGA vers le formats PNG.
• ScriptJPG optimise les fichiers JPG grâce à un algorithme avec ou sans perte en fonction de la qualité d’image que vous voulez.

Autres outils

• AdvanceCOMP
• CryoPNG
• OptiPNG
• PNGCrush
• PNGOptimizer
• PNGOUT
• PNGRewrite
• PNGWolf
• TruePNG
• DeflOpt
• defluff
• Huffmix
• PrePNG
• pngquant
• pngnq
• Color Quantizer

→ Comparatif entre les différentes solutions. Merci @nhoizey pour le lien o/

Articles sur le même sujet

• 31 outils en ligne simples et efficaces pour les travailleurs du web
• 15 « Photoshop-like » en ligne testés et commentés
• PNGHack — La fin de 7 ans de malheur avec IE 6
• [résolu] Les folles journées de l'intégrateur HTML et ses petits tracas…
• Opacité CSS et effet de trame avec GIF/PNG transparent

Développement web

1. jsfiddle — Idéal pour partager des bouts de code ou mettre en place des tests avec HTML, CSS, jQuery (ou Mootools, etc.). Voir aussi : JS Bin, Pastie, Pastebin.
2. MarkUp Validator – Utile pour tester la validité de votre code HTML (mais aussi XHTML, SMIL, MathML) selon les spécifications du W3C. D’autres outils de validation existent, notamment pour vérifier la conformité de CSS, RDF, RSS, XML. Quant à Link Checker, il vous permettra de vérifier si votre site contient des liens qui ne fonctionnent plus ; Semantic Extractor vous montrera vos pages du point de vue sémantique.
3. HTML-Ipsum – Bien sûr, rien ne vaut le texte définitif. Mais en attendant que votre client ne vous fournisse le Saint-Graal du Webdesign (le contenu), voici une ressource à garder sous le coude pour créer des blocs de HTML (paragraphes, listes ordonnées ou non, listes de définition, formulaires, titres et paragraphes plus ou moins longs, etc.), avec du faux-texte. Voir aussi Lipsum qui propose du faux-texte dans une quarantaine de langues.
4. Lorempixel — Choisissez une taille d’image et un thème en accord avec le sujet de votre site (parmi les 11 disponibles), puis cliquez sur Image couleur ou Niveau de gris pour obtenir un visuel de placement pour agrémenter vos pages remplies de Lorem Ipsum. Voir aussi Placekitten, Dummyimage ou Placehold.it.
5. CSSLisible — Tout droit sorti du labo de Darklg, cet outil réorganise vos CSS et change l’ordre des propriétés pour faciliter la lecture (et donc la maintenance) de vos feuilles de style. Attention, pour le moment, les commentaires sont retirés ! Voir aussi Styleneat.
6. PunyPNG — La compression d’image qui va bien. Cet outil optimise vos images en réduisant considérablement leur taille, sans perte de qualité. Voir aussi Smush.it.
7. Listes pour Webdesigner — Last but not least, voilà une liste d’une vingtaine de liste qui devrait faire plaisir aux accros des bons tuyaux !

Edition & travail collaboratif

1. Markdown Editor — J’ai adopté la syntaxe Markdown depuis déjà plusieurs années pour prendre des notes structurées et les transformer en billet via l’excellent plugin Markdown on Save pour WordPress. Pour en revenir à Markdown Editor, il vous permettra de transformer à la volée votre syntaxe Markdown en HTML sans forcément passer par un CMS…
2. Diigo — J’ai cherché une solution de bookmarks alternative à Delicious lorsque Yahoo! a cherché des repreneurs, il y a quelques mois. J’utilise régulièrement la Diigolet pour sauvegarder mes liens, prendre des notes et les partager sur les réseaux sociaux. Une fonction enregistre automatiquement les liens sur Delicious. Vous pouvez me retrouver sur mon compte Diigo. Voir aussi Scrible.
3. Notepad.cc — Mini éditeur en ligne, à l’image du Bloc-note de Windows. Idéal pour partager des notes, protégées ou non par mot de passe.
4. Ta-da List — Créer des listes  de choses à faire, réordonner les items, partager vos listes, etc. Un site de todolist simple et efficace, pour nous, qui avons toujours tant de choses à faire pour avant-hier. Voir aussi Workflowy.
5. Writeboard — Un outil pratique pour rédiger et corriger des textes à plusieurs. Chaque «Board» est accessible via une URL. Les révisions sont listées dans la marge avec le nom des personnes ayant apporté des modifications. Il est possible de s’abonner au flux RSS des modifications faites sur les documents.
6. Doodle — Organiser des réunions, des rencontres en créant des sondages pour connaitre le moment qui conviendra au plus grand nombre de participants. Vue Tabulaire (liste) ou vue Calendrier pour avoir une vue d’ensemble des disponibilités et des événements.
7. Twtpoll — Créer des sondages et des enquêtes d’opinion et partagez-les sur les réseaux sociaux grâce à une simple URL.
8. Kiwoos — Créez votre sondage en quelques clics … Et partagez-le sur Twitter et Facebook avec vos amis.

Réseaux

1. Ping.eu — Tout connaitre ou presque à propos d’une adresse IP ou d’un nom de domaine : Ping, Traceroute, DNS lookup, WHOIS, Port check, Reverse lookup, Proxy checker, Mail relaying, Bandwidth meter, Network calculator, Network mask calculator, Country by IP, Unit converter  !

Dictionnaires et références

1. yoyodesign — Nombreuses traductions d’articles et de recommendations du W3C. Voir également la liste des traductions françaises des documents du W3C.
2. htmldog — C’est en anglais, mais la clarté des explications en fait une référence incontournable pour tout ce qui touche au développement web, avec un dictionnaire HTML où l’on retrouve toutes les balises passées au crible avec des exemples d’utilisation, les attributs requis, les attributs optionels et des exemples !
3. gotAPI — regroupe les principales API du web dans une interface Ajax très réactive : HTML, CSS, Javascript, jQuery, PHP, Ruby, asp, mais aussi le fonctionnement de certains CMS comme Drupal ou de services web comme Flickr.
4. Giminik — La liste des balises XHTML 1.1 (ou 1.0 Strict sans les éléments obsolètes), leur utilité, leurs attributs, leurs évènements et la relation entre parents et enfants (hiérarchie). Indispensable pour construire un document valide.
5. Guide HTML — Le HTML de A à Z de Laurent Bernat : 95 balises HTML décrites par le menu (version, compatibilité Netscape / IE, type, attributs, usage, exemples) (Merci Loïc M.).
6. Opquast — l’ensemble des bonnes pratiques pour la qualité des services en ligne. Abonnez-vous au fil RSS des bonnes pratiques pour avoir votre dose quotidienne.
7. Openweb — Les bonnes pratiques en action pour les technologies du web (XHTML, RSS, CSS, DOM, PNG) et les différents thèmes qui y sont associés (pages dynamiques, navigateurs, accessibilité, études de cas, mise en page, multimédia, structure).
8. Développez (pour le web) — toutes les technologies du web à portée de clic. Des tutoriels, des cours, des documents à télécharger. Allez, faites le plein !
9. Forum Alsacreations — Presque toutes les questions sur les CSS et le HTML et quasiment toutes les réponses ! Cerise sur le gâteau, la FAQ est complète et bien organisée.
10. Wiki Media Box — Pour obtenir une présention claire (succinte ?) d’une propriété CSS et sa compatiblité avec les navigateurs, c’est nickel (Merci Pierre le Bot).
11. Leftlogic — Permet de voir le code html d’un caractère, pratique lorsqu’on cherche le code pour ñ par exemple (Merci Anthony).
12. Format publicitaire AdSense — Et oui, qui n’a pas eu besoin de prévoir des emplacements publicitaires dans une charte graphique et de chercher les formats les plus courants ? Voici les formats en vigueur chez Google, qu’il s’agisse des formats textes, images ou vidéos.
13. WordReference — Sans doute le meilleur site de traduction (mot à mot en incluant les locutions idiomatiques). Pour les cas difficiles, vous pouvez utiliser le forum. Nombreux plugins Firefox pour la recherche par langue.
14. Les dictionnaires — Un maximum de dictionnaires thématiques classés par catégories : langue française, synonymes, encyclopédie, citations et expressions, gastronomie, humour, acronymes, etc. Mention spéciale pour le Trésor de la Langue Française Informatisée (TLFI pour les intimes) : interface web 0.2 mais très efficace (Florent V. sous souffle dans l’oreillette que l’on peut y accéder via le portail lexical du Centre national de ressources textuelles et lexicales.
15. BonPatron — Correcteur qui trouve des fautes d’orthographe et de grammaire en français.

N.’hésitez pas à partager vos services en ligne préférés dans les commentaires de ce billet, sur Twitter ou sur Google+, c’est vous qui voyez :-)

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Foundation — Framework HTML, CSS & jQuery
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Définir le métier « intégrateur web » ou « intégratrice web »
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples

Petite histoire

J’ai créé ce logo il y a quelques années dans le cadre d’un projet collectif autour de WordPress lancé par @fran6. Je l’ai souvent recyclé pour illustrer mes articles sur WordPress. Je l’ai ressorti dernièrement dans le cadre de plusieurs projets dont WordPress & Webdesign et je me suis dit que son côté «généraliste» pourrait peut-être servir à d’autres personnes et à d’autres projets.

«WordPress je thème» est à l’origine un logo et un exemple de page d’accueil que j’ai proposé pour un projet autour de WordPress en 2008.

Test de page d'accueil. Cliquez pour agrandir l'image.

WordPress je thème !

Capture d’écran du logo avec les traits de coupe optimum autour du coeur

Logo WordPress je thème. Cliquez pour agrandir l'image.

Caractéristiques du logo

Nom du logo

• WordPress je thème.

Crédits

• Bruno Bichet

Format

• 32 pixels par 32 pixels.

No Man’s Land

• Minimum 6px autour du logo, par exemple si le texte d’accompagnement commence par une lettre arrondie comme la lettre O (W)ORDRESS.
• Optimum 10px autour du logo ou si le texte d’accompagnement commence par une lettre droite comme la lettre I (W)INTEGRATEUR WORDPRESS.

Couleur

• Hexadécimal : #B28012.
• RVBa : rgba(178, 128, 18, 1).
• CMJN : C31, M48, J100, N9.

Police de caractère d’accompagnement

• Georgia Regular en capitales ou petites capitales.
• Approches de groupe négatives : letter-spacing: -0.25em à letter-spacing: 0.5em à moduler selon le texte. Sur Illustrator, par exemple, j’utilises les valeurs suivantes : Définir le crénage entre deux caractère : Optique et Définir l’approche des caractères sélectionnés : -50 pour une taille de caractère de 24 points (Georgia Regular).
• La ligne de base pour le texte d’accompagnement  à prendre en compte se situe sous la première transversale du W.

Représentation des guides pour l'espace entre le logo et le texte d'accompagnement éventuel

Licence d’utilisation

Ce logo WordPress je thème est sous licence Creative Commons Paternité – Pas de modification (1) CC BY-ND 2.0.

(1) Sauf pour la couleur que vous devriez adapter à votre propre charte graphique sous la forme d’un aplat de couleur (pas de dégradés, d’ombres portées internes ou externes, etc.). Il reste également possible de modifier la taille en adaptant l’espace du No Man’s Land en conséquence.

Toutefois, il est tout à fait possible d’uiliser le logo en transparence sur un fond lui-même coloré ou composé de dégradé comme c’est le cas dans l’exemple de page d’accueil vu plus haut.

Télécharger le logo

• → Format Adobe Illustrator 3.
• → Format PNG 24 bits transparent.

Articles sur le même sujet

• Ebauche de logo pour illustrer le concept de code source libre
• Un « Logothic » pour WordPress Basics
• Super Formateur HTML & CSS bientôt dans la place ?
• Créer son site web avec WordPress de A à Z… avec le Codex
• Lancement de Dotpress.fr «point presse» de vos communiqués d’entreprise

Comme vous pouvez le remarquer sur la capture ci-contre, il est possible de prévisualiser et de télécharger la grille choisie au format PNG.

Avec Gridulator, «griduler» n'a jamais été aussi simple !

Lire Say Hello to Gridulate pour en savoir plus. Via @LeCourrierIndus

Articles sur le même sujet

• #WDFR — Imprimez votre grille pour dessiner vos croquis
• 940.css version fluide — Grille de mise en page en pourcentage
• display: table et display: table-cell pour faire une mise en page web ?
• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
• Calculer une grille de mise en page « typo » avec le nombre d'Or

• Prise en charge du chunk iTXt,
• Utilisation des dernières version de zlib et libpng.
• Le code binaire est désormais une application Unicode,
• Le logiciel n’est pas compatible avec Window 95/98/ME,
• Beaucoup de ménage dans le code source,
• Quelques bugs réparés, mais d’autres bugs sont sûrement apparus qu’il faudra réparer à leur tour !
• Passe de la licence GPLv2 à GPLv3.

Ce petit utilitaire est très pratique pour modifier la couleur par défaut des PNG transparents pour éviter le background disgrâcieux sous IE6 ;)

Articles sur le même sujet

• IE6 — Gérer la transparence du format PNG 24 bits
• Editeur de dégradés CSS3 à la mode de Photoshop
• Optimiser les images PNG, JPG, GIF
• Nouvelle méthode de remplacement de texte par une image
• 31 outils en ligne simples et efficaces pour les travailleurs du web

Le format PNG

Le PNG est format d’enregistrement d’image destiné à remplacer le format GIF dans sa version 8 bits. La version 24 bits en RVBa — qui comprend plus de 16 millions de couleurs — autorise jusqu’à 256 niveaux de transparence très utiles en webdesign pour superposer deux images dont celle du dessus laisse transparaitre celle du dessous.

Malheureusement, IE6 ne comprend rien à ces différents niveaux de transparence : il faut ruser, c’est usant. Certains préconisent la dégradation grâcieuse : utiliser la transparence dans les navigateurs qui la prennent en charge et servir autre chose au dernier de la classe : un PNG 8 bits avec une seule couleur de transparence, fusionner les deux images censées se superposer, voire même utiliser une image légèrement différente.

Après tout, les visiteurs ne sont pas toujours des développeurs web utilisant plusieurs versions de navigateurs pour traquer la moindre différence de rendu. Si vous pouvez vous le permettre, foncez ! Dans le cas contraire, il faudra recourir à des solutions plus ou moins fonctionnelles selon que l’image en question se trouve placée en background d’un élément (une div, par exemple) ou dans une balise img. Si votre image transparente est placée sur un fond uni, il reste la possible de modifier l’image par voie logicielle :

Modifier le chunk (segment) bKGD des png

Un image au format PNG est composée de différents segments (chunks) dont le fameux bKGD qui spécifie une couleur de fond par défaut. A noter que les agents utilisateurs (navigateurs, logiciels, etc.) ne sont pas tenus de respecter cette couleur et peuvent en utiliser une autre. Dans IE6, cette couleur se rapproche d’un gris-vert tirant sur le turquoise…

Certains logiciels comme TweakPNG permettent de modifier la valeur de bKGD. Si vous disposez d’un fond de couleur uni, il suffit d’y mettre la couleur du fond sur laquelle est placé votre image contenant des zones transparentes.

Dans le cas contraire, les filtres Microsoft sont nos amis :

Le filtre `AlphaImageLoader` de Microsoft

Internet Explorer (depuis la version 5.5) inclut un mécanisme de filtres propriétaires filter dont AlphaImageLoader qui gère la transparence des png 24 bits. L’utilisation du filtre diffère selon que l’image est appelé via la balise img ou en tant que background d’un autre élément.

Appliqué sur une balise `img`

Applique le filtre sur les images dont la classe CSS est .img_png à l’intérieur d’une feuille de style réservée à IE6 avec les commentaires conditionnels. Il suffit de renseigner la source de monImageTransparente.png dans la variable src :

.img_png {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pix/monImageTransparente.png', sizingMethod='image');
}

Appliqué sur une image en `background`

Pour les navigateurs tenant compte de la transparence, vous aurez la règle CSS :

.div_png {
    width: 100px;
    height: 150px;
    background: url(../pix/monImageTransparente.png) no-repeat;
}

.div_png {
    width: 100px;
    height: 150px;
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pix/monImageTransparente.png', sizingMethod='scale');
}

• image – Réduit ou élargit le bloc pour correspondre aux dimensions de l’image (valeur par défaut),
• scale – Etire l’image aux dimensions du bloc,
• crop — Rogne l’image pour qu’elle tienne dans le bloc.

Quelques contraintes

1. La source de l’image doit être relative au document HTML qui l’affiche et non à la feuille de style CSS qui la réclame. De sorte qu’une image se trouvant dans un dossier images appelée dans un fichier CSS se trouvant dans un dossier css ne devra plus se trouver sur le chemin ../pix/monImageTransparente.png mais sur pix/monImageTransparente.png.

2. Les liens contenus dans un élément HTML possédant une images de fond transparente ne sont plus cliquables, les champs input ne sont plus accessibles et le texte n’est plus sélectionnable. Une manière générale d’y remédier est d’ajouter une déclaration du type :

   
   .div_png a,
   .div_png input {
       position: relative;
       z-index: 1;
   }
   

   Pour plus d’information sur cette question, lire le fil de discussion paru sur le forum d’Alsacréations et la synthèse rédigée par Frank Galey.

3. Il n’est pas possible d’utiliser les propriétés background-repeat et background-position avec une image PNG transparente en background.

4. Il est difficile d’utiliser des événements de style rollover pour permuter des images de fond au passage de la souris.

Passez-moi l’expression !

C’est assez contraignant. Heureusement, le web est rempli de gens de bonnes volonté qui se sont retroussé les manches pour nous offrir des solutions sur un plateau. Voyez plutôt :

* html img,
* html .png {
    position:relative;
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Le * html est là uniquement pour cibler IE6. Vous pourrez donc vous en passer si vous utilisez une feuille de style dédiée à ce navigateur. Ne fonctionne pas si Javascript est désactivé. Nécessite une image transparente de 1px de côté (transparent.gif).

Note : il sera peut-être nécessaire d’ajouter un z-index: 1; pour éviter les problèmes de liens, d’éléments de formulaire ou de sélection de texte évoqués plus haut.

Une solution globale avec iepngfix

Il existe de nombreux scripts permettant d’automatiser avec plus ou moins de bonheur cette gestion de la transparence des images PNG. Ils mettent tous en oeuvre le filtre AlphaImageLoader soit dans un fichier Javascript, soit dans un fichier HTC. Parmi tous les scripts existants, j’ai retenu iepngfix de TwinHelix que m’a conseillé Oncle Tom sur Twitter.

Ce composant HTC gère la plupart des contraintes énoncées plus haut, y compris l’absence de prise en compte de background-repeat et background-position dans iepngfix version 2.0 Alpha 3.

Le script est très simple à utiliser :

1. Copiez les fichiers *iepngfix.htc* and *blank.gif* dans le dossier de votre site web,

2. Copiez la déclaration CSS suivante dans votre feuille de style ou votre fichier HTML :

       img, div {
           behavior: url(iepngfix.htc);
       }
   

   Vous pouvez placer dans ce sélecteur CSS toutes les balises HTML, les identifiants ou les classes pour lesquels vous désirer activer la gestion de la transparence des PNG. Séparez-les simplement par une virgule.

3. N’oubliez pas que le chemin vers les fichiers *iepngfix.htc* et *blank.gif* est relatif au document HTML et non à la feuille de style CSS.

4. Si votre site est composé de sous-dossier, n’hésitez pas à ouvrir le fichier *iepngfix.htc* dans un éditeur de texte pour modifier la variable `blankImg` afin de la faire pointer vers votre pixel transparent. Par exemple : `IEPNGFix.blankImg = ‘/images/blank.gif’;`

   Cette fois encore, le chemin doit être relatif au document HTML. Si vous désirez activer la prise en charge des propriétés *background-repeat* et *background-position* assurez-vous d’inclure le fichier Javascript *iepngfix_tilebg.js* dans votre document HTML :

   <script src="iepngfix_tilebg.js" type="text/javascript"></script>
   

5. Dans certains cas, il sera nécessaire d’envoyer le bon type MIME à Internet Explorer 6. L’auteur du script a prévu un fichier *iepngfix.php* qui inclut le fichier *iepngfix.htc* tout en renvoyant le type MIME `text/x-component` associé aux fichiers `.htc` :

       img, div, a, input {
           behavior: url(/css/resources/iepngfix.php);
       }
   

6. Pour améliorer les performances, soyez le plus sélectif possible : préférez un `#img_header` ou un `.img_png` à l’utilisation de la balise `img` seule, sauf bien sûr si toutes vos images ont besoin du script !

7. Il se peut que le fond gris-vert apparaisse brièvement lors du chargement de l’image. Si vous ne voulez pas ce comportement (notamment sur les grandes images), vous n’aurez qu’à revenir à une utilisation « manuelle » du filtre *AlphaImageLoader* comme indiqué dans la première partie.

   N’hésitez pas à consulter le fichier *iepngfix.html* présent dans l’archive *.zip* qui apporte une palanquée d’informations, de trucs et d’astuces pour utiliser le script et remédier aux problèmes d’utilisation.

Une nouvelle solution globale avec DD_belatedPNG

DD_belatedPNG semble faire l’unanimité autour de lui pour sa légèreté et son efficacité, y compris lorsqu’on l’utilise avec background-position ou background-repeat. Le script s’utilise très simplement :

<!--[if IE 6]>
    <script src="DD_belatedPNG.js"></script>
    <script>
        DD_belatedPNG.fix('.png_bg');
    </script>
<![endif]-->

<script type="text/javascript">
// <![CDATA[
             DD_belatedPNG.fix('.example1, .example2, img');
// ]]></script>

Conclusion

Ce sujet semble inépuisable, ce qui n’est pas mon cas. Je laisse cet article en version bêta pendant quelques temps histoire de laisser décanter le sujet : il serait étonnant que des erreurs ou inexactitudes ne se soient pas glissées sous le tapis de souris ;)

Ressources externes

Généralités sur le format PNG

Gérer la transparence du PNG par voie logicielle

Ce logiciel permet d’accéder aux informations contenues dans un fichier PNG dont notamment le chunk (segment) bKGD pour modifier la couleur de fond sur laquelle s’applique la transparence (un fond gris/vert/turquoise par défaut dans ie6). Vous trouvez quelques explications concernant son utilisation sur

Logiciel très pratique et simple d’emploi pour améliorer la compression des images au format PNG. Il suffit de faire glisser les images que vous voulez améliorer et le PngOptimizer s’occupe du reste. Possède quelques options pour manipuler les chunks ou garder une version de l’image d’origine.

C’est peu connu, mais les spécifications du format PNG 8 bits autorisent plusieurs couleurs dans le segment Alpha, ce qui permet de spécifier plusieurs couleurs transparentes en utilisant un logiciel approprié comme Fireworks. Voilà une bonne technique pour s’autoriser une dégradation grâcieuse des images transparentes sous Internet Explorer 6 !

Un peu hors-sujet par rapport à la transparence des PNG, je signale l’existence d’un plugin pour Photoshop qui permet d’optimiser le poids des images PNG : le plugin installé par défaut dans Photoshop ne rend pas vraiment justice aux possibilités de compression de ce format.

Quelques scripts

Version 1.0 et version 2.0 Alpha 3 du script iepngfix. Gère les background-repeat et background-position dans la version Alpha à l’aide d’un fichier Javascript supplémentaire.

Ce script est proposé par Yves Van Goethem. Nombreuses options disponibles réservées à un public averti ;)

Fichier Javascript gérant la plupart des pièges posés par l’application du filtre AlphaImageLoader.

Avec Unit PNG Fix pas besoin de définir des classes ou de cibler vos éléments. Fonctionne avec les balises img ou sur les background-image. Très léger. Merci à 13sportif pour le lien.

Expression Javascript permettant de gérer la transparence des PNG en img ou en background

Script très léger et pratique. S’applique à toutes les images PNG de votre document. Toutefois, certaines images restent en mode téléchargement alors quelles sont bien affichées, ce qui peut donner l’impression au visiteur que quelque chose ne tourne pas rond sur le site. Malgré tout, ce script vieillissant peut encore rendre quelques services : il m’a rappellé l’existence de l’attribut defer="defer" de la balise script qui permet de différer le chargement (ou l’application) du script en question. Voir cet article très complet sur l’analyse de defer.

Propose une version modifiée du script précédent pour les champs de formulaires `

`

Encore un Javascript à se mettre sous la souris ! Crée une balise div dans laquelle est affichée l’image traitée par le filtre DirectX :

Plus ou moins la même chose avec un composant HTC.

Une solution originale en PHP.

Autres ressources sur la transparence des PNG

La blonde propose avec pédagogie un récapitulatif des différentes méthodes pour gérer cette transparence sur 256 niveaux.

Présente de nombreuses solutions et contournement pour afficher les images transparentes.

La FAQ du forum Alsacréations sur comment obtenir la transparence des PNG avec Internet Explorer 6

Tutoriel pour pallier les effets secondaires du filtre AlphaImageLoader en cas de positionnement absolu.

Mise en garde d’Eric Daspet sur l’utilisation des filtres : Si vous l’utilisez pour une petite icône de présentation qui apparaît vingt fois dans votre page, c’est vingt exécutions du filtres qui sont faites. À chaque exécution du filtre le rendu est bloqué, en attente. Sur Yahoo! Search en retirant AlphaImageLoader de la feuille CSS c’est jusqu’à 100ms qu’ils ont gagné (information donnée par Stoyan Stefanov sur sa dernière présentation).

Article très instructif sur la transparences du format PNG et l’application de AlphaImageLoader

Articles sur le même sujet

• Trucs et astuces CSS
• Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)
• Opacité CSS et effet de trame avec GIF/PNG transparent
• Nouvelle méthode de remplacement de texte par une image
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

Parmi les nombreux scripts permettant à IE6 de gérer cette transparence, je vous propose de jeter un oeil sur PNGHack de Yves Van Goethem.

Voir la présentation sur Slideshare.

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Optimiser les images PNG, JPG, GIF
• 31 outils en ligne simples et efficaces pour les travailleurs du web
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards

1. Créer un dégradé sur vos titres avec un PNG transparent. Ca ne marche pas avec IE6, mais vous pouvez toujours utiliser le script IE7.js de Dean Edwards ou un des nombreux scripts qui permettent de gérer la transparence sur 24 bits à la place du navigateur collé au radiateur ;)
2. L’excellent Sitepoint a mis en ligne une version encore bêta de ce qui s’annonce comme une nouvelle référence pour connaitre les balises HTML et leur contexte d’utilisation. Via Chris Heilmann. A ce propos, je vous rappelle le non moins excellent Dictionnaire hiérarchique des balises XHTML 1.1 qui vous permettra de connaitre l’essentiel des balises et de vous renseigner sur les imbrications qu’il est possible de faire ou pas.
3. Développer en utilisant Firefox peut nuire au simple plaisir de surfer. Heureusement, Il y a Flock. C’est un navigateur « social » basé sur le moteur de rendu Gecko. Social, parce qu’il inclut une floppée de fonctions basées sur les API de Twitter, Facebook, Flickr, etc. En voici une présentation rapide et efficace par les travailleurs du web.
4. Vous envisagez d’installer WordPress 2.5 ? Prenez donc un peu d’avance en suivant le premier volet de NicoLargo consacré aux nouveautés de ce nouvel avatar de notre CMS préféré ! Lorelle à fait une check-list sur Blog Herald pour se préparer à cette nouvelle version qui s’annonce comme une version majeure : après avoir remanié la structure de la base de donnée avec la version 2.3, la version 2.5 met l’accent sur l’interface d’administration. Pour préparer le terrain, lisez également les conseil du codex himself pour migrer de la 2.3 à la 2.5 et pourquoi pas avec ceux de Joost de Valk concernant les modifications à apporter aux plugins.
5. En parlant de CMS, il y a du mouvement du côté de Dotclear : nouveau forum, nouveau site pour le printemps, nouveau blog. Je garde le meilleur pour la fin : une Release Candidate de Dotclear 2 est prévue, ainsi qu’une version 1.4. Les dates de sortie seront données d’ici la refonte du site. C’est un engagement.
6. Saviez-vous qu’on pouvait utiliser l’url de son blog comme identifiant OpenID ? La marche à suivre chez Rémi Prévost. J’en profite pour vous rappeller qu’il est également possible d’utiliser l’adresse de son compte WordPress.com. Vous savez, celui qui vous sert à obtenir votre clé Akismet ;)
7. Pour finir, la solution ultime pour « monetiser » votre blog :D

Articles sur le même sujet

• WordPress 2.2 : Stan Getz release et le thème Sandbox de plaintxt.org
• Améliorations cosmétiques et ergonomiques sur ce blog
• Opacité CSS et effet de trame avec GIF/PNG transparent
• Trucs et astuces CSS
• Liens utiles pour l'intégrateur HTML / CSS et le développeur web

1. PNGHack — Gestion de la transparence pour les versions inférieures à IE6 via javascript. Projet hébergé sur Google Code, gage de qualité : documentation, wiki, groupes de discussion, etc.
2. Coins arrondis avec Javascript — Dans les commentaires qui ont suivi l’article sur le design fluide à coins arrondis en CSS, j’ai trouvé cette petite pépite qui vous permettra de générer les balises div nécessaires aux quatre coins de l’image via le DOM à la place de les mettre en « dur » dans le HTML. Ce qui rendra vos page CSS3 Ready pour utiliser les backgrounds multiples. L’auteur a modifié l’excellent script de Simon Willison publié sur sitepoint dans lequel vous trouverez des explications complètes sur la technique utilisée pour obtenir des coins arrondis avec CSS et Javascript.
3. SmashingMagazine — Après les 53 techniques CSS sans lesquelles la vie ne vaut pas d’être vécue, voici venir le temps des puissantes techniques CSS pour coder efficacement. Que dire de plus à part « tendez l’autre joue » après un tel smash ;)
4. bluevertigo — Pour comprendre ce que le mot « ressources » veut dire… Je n’en dis pas plus, à part : « ayez confiaaance » ;)
5. WordPress 2.5 — très bonne analyse de Frédéric de Villamil sur les améliorations apportées à l’interface d’administration de WordPress.
6. Suckerfish WordPress plugin — Ce plugin permet de transformer les listes de pages, de catégories, d’archives ou de liens en menu déroulant horizontal. Voici un blog de démo pour vous rendre compte des possibilités.
7. Mon Régis s’appelle Roger — délicieuse anecdote de Franck sur le sang-froid dont nous – les Seniors – devont parfois faire preuve face à l’impétueuse jeunesse pleine de fougue qui nous entoure ^_^
8. intégrateur ? — oui, je sais ça fait 8 (Monsieur Plus, je vous dis ;) ), mais je viens juste de tomber sur cet excellent article sur le métier d’intégrateur web que je trouve, ma fois, assez bien vu ;)

Articles sur le même sujet

• Le Petit Journal du Web — 09/2011
• Liens utiles pour l'intégrateur HTML / CSS et le développeur web
• Revue de web de la semaine #2 (WordPress, développement web et miscellanées…)
• 7 liens utiles pour l'intégrateur web : le retour
• Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign

Si le premier groupe nous donne satisfaction, il faut bien reconnaitre que le second reste scotché près du radiateur dès qu’on parle d’overflow, de min-height, de positionnement implicite avec right, bottom ou left ou encore d’interactivité avec :hover sur autre chose qu’une ancre a…

Bref, toutes ces petites choses très utiles au cours de l’intégration CSS qui manquent cruellement à Internet Explorer. Sans parler de la prise en charge inexistante de certains sélecteurs CSS qui seraient très pratique pour éviter de spécifier une classe chaque fois que l’on veut atteindre un élément en fonction de sa position dans le DOM.

Dans la suite de cet article nous verrons que la bibliothèque Javascript IE7 peut nous aider à travailler plus efficacement avec Internet Explorer pour faciliter la mise en œuvre de « composés » HTML / CSS cross-browser.

Est-ce vraiment nécessaire d’avoir un affichage identique quelque soit le navigateur ?

Dans le flux de production habituel, la production d’un site web passe par la conception d’une charte graphique dont il conviendra de découper et d’agencer les morceaux à coup de balises HTML et de déclarations CSS.

L’image servant de référence quasi-absolue, il devient très difficile de défendre auprès de son commanditaire le point de vue selon lequel la sacrosainte charte graphique puisse présenter des différences — même minimes — d’un navigateur à l’autre, fut-ce d’un pixel !

Pour parvenir à ses fins, l’intégrateur web dispose de deux armes : le code HTML qui — s’il suit une ligne sémantique de bon aloi — devrait garder la même structure d’un bout à l’autre du projet, et les CSS qui servent de variable d’ajustement jusqu’à la fin.

Reste à trouver une méthode de travail qui limite à la fois les différences de rendu et le nombre de lignes de code à produire :

• Les visionnaires conseillent de faire un site conforme aux standards en prenant un navigateur comme Firefox ou Opera comme référence pour le rendu CSS, et d’utiliser au maximum les possibilités offertes par…
  • les sélecteurs CSS,
  • la transparence PNG en 256 niveaux,
  • le calcul des largeurs minimales et maximales,
  • etc,
  …puis de faire au mieux pour les navigateurs non conformes. Cette approche, pour intéressante qu’elle soit, n’est pas possible dans un contexte commercial car seule une poignée de visiteurs verrait le site web dans toute sa splendeur, tandis que la majorité n’en aurait qu’une version dégradée, fut-ce gracieusement…
• Les réalistes proposent de n’utiliser que les propriétés disponibles sur la majorité des plate-formes, en prenant pour chaque fonctionnalité, le plus petit dénominateur commun en fonction du projet. Cette approche permet de concilier le respect des standards (même s’il ne s’agit pas des toutes dernières recommandations) avec un rendu uniforme des pages en contrepartie d’une éventuelle limitation des fantaisies graphiques souhaitées par le client. En effet, selon la maquette, le fait de ne pas pouvoir utiliser la transparence PNG, par exemple, peut avoir une incidence sur la rigidité de la structure HTML / CSS à cause des découpes d’images : on sera enclin à réunir plusieurs partie d’image en une seule, alors qu’avec la gestion de la transparence, il est sera plus souvent possible de « granulariser » les découpes.
• Une troisième approche réalistico-visionnaire que l’on retrouve parfois sous l’acronyme MOSe (Mozilla, Opera, Safari enhancement) mélange les deux premières approches en cherchant le plus petit dénominateur commun pour assurer une large compatibilité, puis en introduisant des améliorations visibles uniquement dans les navigateurs modernes. Cette dernière approche est celle qui offre une plus grande cohérence à vos pages web dans le temps, puisque qu’en suivant les recommandations au plus près, plus le temps passe et plus le souvenir des mauvais navigateurs s’estompe. (Ceci est à rapprocher de l’annonce de la nouvelle balise meta mise en place à l’occasion de la sortie prochaine d’IE8 qui réintroduirait dans l’écosystème du web un pis-aller dont on commençait à peine à se débarrasser : la détection du navigateur pour savoir s’il doit basculer en mode standard ou non. Voir ma petite note sur le sujet.)

IE7.js : ce n’est pas de la magie, c’est de la technologie ! »

Articles sur le même sujet

• Menu HTML et CSS, sliding doors et item current en PHP
• Trucs et astuces CSS
• Quelques notes — Programme de formation HTML & CSS
• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
• Frameworks CSS + Reset CSS : design from scratch