Préparez-vous pour Alsacréations V3

(reprise du message précédent)

Re,

A titre d'exemple démonstratif rapide (donc non vérifié) :
L'actuel est de 15.48 Ko (15852 octets) - incompatibilité avec IE6, ce qui vous oblige donc à l'alternative CSS, et une autre image.

On peut arriver à ce type de résultat (vous pouvez obtenir un résultat identique à l'original en travaillant mieux l'image) :
7,00 Ko (7 172 octets) - compatible IE6 et autres butineurs.

Smushit utilise des méthodes simples pour "optimiser" un PNG, sans calculs spécifiques. C'est plus un "nettoyeur" qu'autre chose. L'optimisation n'est pas simplement la compression, mais le fait de choisir le bon format pour le bon usage.

Le png est idéal pour les jeux de transparence et tant pis pour IE6

Patidou a écrit :
Le png est idéal pour les jeux de transparence

original.defeat ne dit pas le contraire

original.defeat a écrit :
L'optimisation n'est pas simplement la compression, mais le fait de choisir le bon format pour le bon usage.

Ah mais je veux bien, sauf qu'on ne pourra pas passer 3h par image malheureusement (les optimisations de l'ordre du demi-Ko sont à réserver à Yahoo). Par rapport à la version actuelle on va déjà faire un grand pas.

Et nous sommes à l'écoute de toute suggestion de méthode.

On sait très bien que Photoshop est absolument pourr... à ch... euh incompétent dans ce domaine.

dew a écrit :

Ah mais je veux bien, sauf qu'on ne pourra pas passer 3h par image malheureusement (les optimisations de l'ordre du demi-Ko sont à réserver à Yahoo). Par rapport à la version actuelle on va déjà faire un grand pas.

+1 Ne faites pas une fixation sur les performances, il y a des chose plus importantes à faire que de chercher à gagner 3 ou 4 ko, je ne dis pas qu'il ne faut pas optimiser, on y pense à peu prés tous un moment ou à un autre et Dew et Raphaël le savent très bien mais je trouve souvent ces considération sur les performances (si la cible n'est pas en connexion RTF)
excessives...
Et au vu de la cible d'Alsa pas besoin de se prendre trop la tête avec ce boulet d'IE6.
Modifié par Hermann (27 Jan 2009 - 18:56)

original.defeat a écrit :
A titre d'exemple démonstratif rapide (donc non vérifié) :
L'actuel est de 15.48 Ko (15852 octets) - incompatibilité avec IE6, ce qui vous oblige donc à l'alternative CSS, et une autre image.

On peut arriver à ce type de résultat (vous pouvez obtenir un résultat identique à l'original en travaillant mieux l'image) :
7,00 Ko (7 172 octets) - compatible IE6 et autres butineurs.

Oui, sauf qu'ici tu as une partie des pixels verts qui entourent le logo en dur. Donc cette image n'est utilisable que sur la partie Accueil/Apprendre, et pas sur les univers Forum (bleu) et Emploi (rouge). Donc ici le calcul c'est:

1. 15 ko, incompatible IE6 (sauf filtre AlphaImageLoader qui a ses problèmes propres), maintenance simple.
2. 3x7 = 21ko, compatible IE6, maintenance compliquée.

Donc tout dépend de comment on pèse la compatibilité IE6 et la maintenance.

original.defeat a écrit :
Smushit utilise des méthodes simples pour "optimiser" un PNG, sans calculs spécifiques.

Oui. Ça reste un outil très utile une fois qu'on a optimisé ses images (en termes de format, de degré de compression pour le JPEG, de nombre de couleurs pour le PNG-8...), pour gagner encore un peu et/ou corriger certaines erreurs des logiciels d'édition.

original.defeat a écrit :
L'optimisation n'est pas simplement la compression, mais le fait de choisir le bon format pour le bon usage.

En prenant en compte tous les paramètres.

De mon point de vue pour le logo, faire trois images c'est une grosse prise de tête et c'est finalement une forme de "hack" plus foireux que AlphaImageLoader.

AlphaImageLoader a été inventé en son temps pour les png, donc il n'y a rien de foireux a l'utiliser pour ie6, c'est très simple à mettre en place :

#header h1{
  width: 390px;
  height: 81px;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/css/img/logo-alsacreations.png', sizingMethod='image');
}

#header h1 img#logo{
  display: none;
}

C'est une ligne à changer par rapport au code actuel et cela permet d'utiliser le même logo.

A noter que AlphaImageLoader est toujours un très bon filtre même pour ie7 dans certaine condition.
Modifié par matmat (27 Jan 2009 - 19:32)

Raphael a écrit :
original.defeat ne dit pas le contraire

J'avais encore compris de travers

matmat a écrit :
C'est une ligne à changer par rapport au code actuel et cela permet d'utiliser le même logo.

En posant des problèmes pour le lien, qu'il faut positionner en relatif, et tant qu'à faire dimensionner en CSS, tout en priant pour que le H1 ne soit pas positionné en absolu ou relatif lui-même (ouf, il ne l'est pas). Et bien sûr ça a un impact sur les performances (100ms par utilisation du filtre, mais pour un logo ça peut aller).

En fait je crois que je n'ai jamais regardé ce que ça donnait dans IE6, à quel point cette question de transparence était gérée dans l'intégration de cette V3. Faudra que je jette un oeil.

matmat a écrit :
A noter que AlphaImageLoader est toujours un très bon filtre même pour ie7 dans certaine condition.

Ah? Pour ralentir délibérément l'affichage des pages?
Je serais curieux de savoir dans quel cas c'est utile.
Modifié par Florent V. (27 Jan 2009 - 20:12)

a écrit :
Ah mais je veux bien, sauf qu'on ne pourra pas passer 3h par image malheureusement

La réaction est prévisible, la réponse aussi : en fait, "optimiser un PNG" selon l'usage ne prend pas plus de temps que de travailler les images comme vous l'avez fait, les méthodes de travail sont juste différentes. Vous estimez -à raison- que cela prend plus de temps parcequ'il s'agit dans votre cas d'une correction à effectuer en plus de ce que vous avez déjà fait.

a écrit :
il y a des chose plus importantes à faire que de chercher à gagner 3 ou 4 ko

L'objectif de mon intervention n'était pas de vous faire "grappiller" quelques Ko, ce n'est pas une course à la performance. L'intérêt principal étant d'assurer la plus grande compatibilité possible du PNG, même sur un navigateur retardataire qui est encore utilisé. Le gain par rapport au poids n'étant que la "cerise".

a écrit :
Et au vu de la cible d'Alsa pas besoin de se prendre trop la tête avec ce boulet d'IE6

Je trouve cette réaction quelque peu "simple". IE6.0, c'est un boulet, donc on cherche pas à comprendre. Je pense que la base même du mot "standard", c'est de faire en sorte d'assurer la meilleure compatibilité possible, même à des "boulets" qui ne la supporte pas. La solution mise en place par Raphaël montre qu'il est soucieux du support de ce navigateur. Je lui en propose une qui est différente et qui a plus d'avantages que d'inconvénients.

La solution proposée vous donne l'avantage d'assurer la compatibilité de vos PNG aux navigateurs qui ne supportent pas le format que vous utilisez à l'heure actuelle. Et il ne s'agit pas que de IE6.0. La technique du "IFIE" et le bidouillage maison de chez Microsoft n'est qu'une solution qui satisfait IE. Le PNG modifié que je vous ai proposé atteint un niveau de prise en charge presque similaire à GIF.

De plus les différentes réflexions concernant le poids sont assez incomplètes. Vous ne gagnez pas 4 Ko sur une image... le poids de l'image restreint (un simple logo à -8ko*visiteur en données utilisateur, - requêtes). Sur grande échelle et avec l'ensemble des images, le bénéfice n'est pas que de quelques Ko, tant pour le serveur que pour le visiteur. Il vous évite aussi l'utilisation de CSS/images alternatives.

a écrit :
1. 15 ko, incompatible IE6 (sauf filtre AlphaImageLoader qui a ses problèmes propres), maintenance simple.
2. 3x7 = 21ko, compatible IE6, maintenance compliquée.

Votre calcul oubli la présence du CSS modifié, et des autres PNG pour IE6.0 peut être ?
Ou peut être qu'aussi les PNG ne seront pas chargés les trois à la fois ? . Vous parlez d'une maintenance simple avec plusieurs CSS, plusieurs fichiers PNG ? Un pour X navigateurs, un pour IE6, un pour ... allons, ce n'est pas sans vous rappeler d'anciennes techniques ?

Je n'ai jamais dit que ma technique était parfaite, il y'a trois PNG certes, mais à calculer les avantages et inconvénients de chacune lorsqu'on a bien étudié le format, l'avantage est net à "ma" solution. Ceci dit, ce sont mes avis et mes calculs
Modifié par original.defeat (27 Jan 2009 - 20:16)

original.defeat a écrit :

Je trouve cette réaction quelque peu "simple". IE6.0, c'est un boulet, donc on cherche pas à comprendre. Je pense que la base même du mot "standard", c'est de faire en sorte d'assurer la meilleure compatibilité possible, même à des "boulets" qui ne la supporte pas.

Certe je n'ai pas fais dans la nuance (ya des jours comme ça ) et j'ai bien conscience de tout ça, ça fait partie de mon boulot
Je n'entendais pas du tout par là qu'il fallait exclure IE6 des test de compatibilité, juste ne de pas chercher obstinément à obtenir exactement la même qualité de rendu ou de mise en page sur cette version...

En tous cas tes remarques sont toujours le bienvenue
Modifié par Hermann (27 Jan 2009 - 20:34)

Florent V. a écrit :

En posant des problèmes pour le lien, qu'il faut positionner en relatif, et tant qu'à faire dimensionner en CSS, tout en priant pour que le H1 ne soit pas positionné en absolu ou relatif lui-même (ouf, il ne l'est pas). Et bien sûr ça a un impact sur les performances (100ms par utilisation du filtre, mais pour un logo ça peut aller).

Tu peux mettre le filtre sur le lien aussi...
La réalité c'est jusqu'à 100ms, ce n'est pas tout à fait pareil!
Modifié par matmat (28 Jan 2009 - 00:28)

matmat a écrit :
Tu peux mettre le filtre sur le lien aussi...

Ah oui tiens, ce serait à tester éventuellement.

matmat a écrit :
La réalité c'est jusqu'à 100ms, ce n'est pas tout à fait pareil!

Autant pour moi, j'avais mal lu et retenu une mauvaise lecture. C'est clair que ça fait une différence, l'impact devenant beaucoup moins sensible. À moins de vraiment en abuser, ça peut être négligeable pour la plupart des sites.

Quoi qu'il en soit, dans mon expérience l'intégration et le support avec AlphaImageLoader est vraiment très chiant, les conséquences secondaire des filtres DirectX sont assez prise de tête et imprévisibles (ça plus le HasLayout...). Dès que je le peux, pour ma part, je favorise du PNG-8 ou du PNG-32 avec bKGD chunk.

Bonjour et félicitations à toute l'équipe qui a réalisé cette v3.

Mais premières impressions et remarques :

Certains labels ne fonctionnent pas dans la parties suggérer un article
(votre e-mail, votre site)

On peux trier les tutoriels par niveau pourquoi ne pas donner la même fonctionnalité sur les articles ?

Je verrais bien une correspondance entre les icones et les niveaux sur les parties tutoriels et articles.

Personnellement j'ai vraiment du mal avec les étiquettes arti, astu, tuto, c'est un peu juste niveau taille pourquoi ne pas répéter la légende à chaque fois qu'elles interviennent (recherche par exemple).

J'ai effectué une recherche avec "débutant" à quoi correspondent les icônes à droite ? Pertinence ?

Si je fais une recherche par mot-clé "html" je n'ai pas ces icônes.

Une fois la recherche effectuée et que j'ai cliqué sur un lien je ne peux pas revenir à ma page de recherche (page web expirée) bon d'accord un F5 permet de retrouver la page mais si je le fais plusieurs fois cela peux devenir assez galère et tous le monde n'utilise pas la molette pour ouvrir un lien dans un autre onglet.


Sur le résultat de la recherche il n'y as pas de spécification de niveau.

Les liens visités et non visités sont très peu perceptibles, une légère accentuation pourrait être sympa.

En tous cas y'a pas à dire c'est beaucoup plus clair et facile de trouver de l'information le boulot à vraiment été colossale et je félicite de nouveau l'équipe qui à réalisé tout cela.
Modifié par knarf (28 Jan 2009 - 00:37)

original.defeat a écrit :
On peut arriver à ce type de résultat (vous pouvez obtenir un résultat identique à l'original en travaillant mieux l'image) :
7,00 Ko (7 172 octets) - compatible IE6 et autres butineurs.

Hoo laisser une bordure autour des lettre (avec un threshold par exemple), spa bête!

Florent V. a écrit :

Oui, sauf qu'ici tu as une partie des pixels verts qui entourent le logo en dur. Donc cette image n'est utilisable que sur la partie Accueil/Apprendre, et pas sur les univers Forum (bleu) et Emploi (rouge).

Ah ouais, donc pas utilisable dans ce cas ...

Hello tout le monde,

Tout d'abord merci pour ces retours, notamment ceux de Knarf, vraiment utiles en terme d'ergonomie du site. Nous avons d'ailleurs déjà pris en compte un certain nombre de tes remarques.

Pour les png, on garde l'idée de côté, mais j'avoue que ça ne sera pas dans nos priorités actuellement. Ces priorités étant de corriger tous les bugs bloquants restants et améliorer encore un peu l'ergonomie générale.

Au fait, personne n'a tenté de proposer une actualité ou d'en commenter une ?

Si, j'ai laissé un commentaire dans l'avant dernière actu à partir de l'interface v3.

QuentinC a écrit :
Si, j'ai laissé un commentaire dans l'avant dernière actu à partir de l'interface v3.

Ah oui !

Hermann a écrit :
Et au vu de la cible d'Alsa pas besoin de se prendre trop la tête avec ce boulet d'IE6.

hum... à part pour les utilisateurs qui n'ont pas le choix de leur navigateur...


D'ailleurs la v3 passe tout à fait bien sur I6, même si quelques images sont moins "fluide" dans le design, ça ne choque absolument pas.

Hello !

Petit bug report pour ma part : impossible de modifier mon profil (genre modifier l'adresse mail ou la fonction/métier)