Yvanoph Karim Modérateur ABC du Web Karim Yvanoph WebMaster 3Alannet webmaster@abc-du-web.com BP 116 7080 Menzel JEMIL Gouvernorat de BIZERTE Tunisie Yvanoph www.abc-du-web.com 0021625332209
Retour à l'Accueil du Mode d'Emploi du Forum XWebDesignor ?
   Accueil   Aide Rechercher Tags Identifiez-vous Inscrivez-vous  
Pages: [1]   Bas de page
  Imprimer  
Auteur Fil de discussion: Les images, origines, formats, tailles, mentions de "Copy Right"  (Lu 5290 fois)
yvanoph
Administrator
Hero Member
*****
Hors ligne Hors ligne

Messages: 2 818


Le PIRE des défauts, ne pas RECONNAÎTRE une erreur


Voir le profil WWW
« le: Jeu. 30 Mai 2013 à 13:07:33 »

Un Site sans images, même très technique, n'existe pas ? Ne, serait-ce que par le Logo de l'entité, voire un "Favicon" ?
Mieux, une image est parfois plus explicite, plus démonstrative qu'une brouette "abomifreuse" de mots !
D'un autre coté, les robots ne savent pas lire ni même s'ils le savent un jour, comprendre une image, car ils leurs manquera la sensibilité humaine, tout un chacun n'ayant pas le même regard, à preuve les réactions totalement différentes voire même parfois opposées sinon contradictoire d'un public face à une œuvre d'Art ? Certains ne comprendront rien à ce que l'Artiste a voulu exprimer, d'autres applaudiront à tout rompre...
D'où la phrase choc publicitaire de la célèbre revue Paris Match, "Le poids des mots, le choc des photos"...

Alors un Site comprendra donc de façon tout à fait normale des images, et parfois même que cela pratiquement pour les spécialisés sur la photo par exemple ?
Néanmoins, cela nous pose quelques problèmes...
Outre leurs sources, leurs dimensions ? Voire leurs formats ? Et pour ceux qui respectent leurs Visiteurs, leurs poids, ou qui souhaitent optimiser au maximum leurs Sites, voire même doper leur Référencement, au delà des spécificités précédentes, par des noms de fichiers "intelligents" ! Sinon quelques méthodes de protection quant aux "Copy Right", ou droits d'auteurs...

Aussi je vous propose d'examiner les différents aspects de base que nous devrions appliquer avec ces fabuleux [Composant]s que sont les images, à savoir :
Organisation, classement, rangement,
Optimisation, poids, format,
Référencement, nom de fichier,
Source, "Copy Right".

Bien évidemment, tout cela est assez technique, et dépasse donc largement l'idée de base de la conception initiale de notre Logiciel favori XWebDesignor, qui, rappelons le, est de permettre aux "nuléophytes" de concevoir et mettre en ligne rapidement, en quelques Clics un simple Site ?


Cordialement, Yvanoph---

Journalisée

La théorie, c'est quand on sait tout mais qu'absolument rien ne fonctionne !

La pratique, c'est quand tout fonctionne "farpaitement" sans vraiment savoir pourquoi, ni d'ailleurs  chercher à comprendre...

Chance inouïe, ici théorie et pratique fonctionnent  !
yvanoph
Administrator
Hero Member
*****
Hors ligne Hors ligne

Messages: 2 818


Le PIRE des défauts, ne pas RECONNAÎTRE une erreur


Voir le profil WWW
« Répondre #1 le: Jeu. 30 Mai 2013 à 13:46:59 »

Voilà bien tout un travail à faire bien avant de se lancer dans la création d'un Site ? En effet, si images il doit y avoir, alors travail en amont sera...

Tout d'abords, créer sur sa machine un /Répertoire /images/org par exemple, dans lequel seront placées toutes vos images. Voire les classer en sous Répertoires selon leurs usages, leurs buts etc. ?
Créer ensuite d'autres /Répertoires comme expliqué ci dessous où vous placerez vos images RE nommées avec des noms explicites, voire mises en ordre logique en appliquant en premier un numéro d'ordre,
"Resizées" au format X et Y dans un Répertoire /XxY,
"Resizées" au format X' et Y' dans un Répertoire /X'xY' (Si vous êtes amené à les présenter sous deux tailles différentes, miniatures puis réelles),
"Resizées" au format X'' et Y'' dans un Répertoire /X''xY'' (Si vous prévoyez un téléchargement pour des tailles imposantes avec une définition importante, téléchargeables dans ce cas par le biais d'un lien [Composant/Texte/Lien]),
voire retoucher les fondus, gammas, corrections de couleur, application de Copyright etc. !

Bien évidemment, tout ce travail de préparation ne peut exister QUE si les Chartes ont été définies, comme la Charte graphique, prévue pour gérer couleurs, dimensions etc. ?

AU PIRE, si vous travaillez "à l'envers", à savoir plonger directement dans XWD puis après coup vous rendre compte que ..., appliquer ces quelques consignes :
Les dimensions d'affichage définies, dans un Logiciel de retouche d'images, reprendre vos images pour les tailler aux dimensions des "trous" prévus dans vos Pages ? Puis procéder au remplacement dans la Médiathèque...
Pour un [Diaporama], ne charger qu'une ou deux images dans la Médiathèque, et ce dernier correctement paramétré, récupérer les dimensions de l'affichage ? Ceci fait, uniformiser l'ensemble de vos images à ces dernières...
Là encore, une astuce : Si vos images ne prennent pas exactement les dimensions, cas d'images tantôt format portrait, tantôt format paysage, vous verrez apparaitre un fond noir, que vous n'apprécierez pas ?
Alors simplement coller vos images sur un fond aux dimensions nécessaires pour le [Diaporama], et de la couleur qui vous convient... (Cf. ci dessous les quatre images d'un [Diaporama "Gags"] ?)
La deuxième sera diminuée pour rentrer en hauteur, alors que dans la quatrième, la bonne hauteur est déjà calculée, et le fond à une couleur personnalisée... Simple à faire quand même, NON ?
Avantages, outre le graphisme seyant souhaité, toutes vos images ayant les mêmes dimensions, le Navigateur du Visiteur ne sera pas obligé de faire travailler sa machine pour tout calculer à chaque image ! ! !
Tout ceci correctement préparé, remplacer dans la Médiathèque les une ou deux images précédentes et incorporer les autres ? Ce qui sera quand même bien plus rapide, car en introduire dix, vingt ou même cent d'un coup, un seul Clic de souris, mais en remplacer cent...


Bien amicalement, Yvanoph---

Journalisée

La théorie, c'est quand on sait tout mais qu'absolument rien ne fonctionne !

La pratique, c'est quand tout fonctionne "farpaitement" sans vraiment savoir pourquoi, ni d'ailleurs  chercher à comprendre...

Chance inouïe, ici théorie et pratique fonctionnent  !
yvanoph
Administrator
Hero Member
*****
Hors ligne Hors ligne

Messages: 2 818


Le PIRE des défauts, ne pas RECONNAÎTRE une erreur


Voir le profil WWW
« Répondre #2 le: Ven. 31 Mai 2013 à 09:25:50 »

Pour les images de fond par exemple, diminuer la résolution au maximum, puisque cette dernière sera automatiquement cachée par une multitudes d'autres [Composant]s ?
Mieux, si votre Page contient elle même un fond par exemple de couleur uniforme, à quoi peut bien servir de charger tous les octets du centre de votre image ? Dans ce cas, couper l'image en deux morceaux en supprimant la partie correspondante à celle de la Page normale. Pour exemple, une image de fond de 2 000 pixels de largeur et une Page courant de  1 000; récupérer deux images, la première des 500 pixels de largeur de la gauche de votre image, la deuxième des 500 de l'extrême droite ! ET les insérer en fond via un JSC 'Fond vertical Window" ! Vous ne chargerez pas ainsi inutilement les 1 000 pixels du milieu...
Et si vous ne voulez passer par deux JSCs, remplir la bande centrale de 501 à 1 500 pixels de noir ou blanc par exemple ? Votre Page deviendra ainsi nettement moins lourde !

Pour exemple, les quatre images ci dessous :
La première, image de fond originale trouvée sur un Site, 161 Ko, rien que ça...
Si nous avons une Page de 800 pixels de large, récupérons deux bandes de 350 de chaque coté, puisque 350 + 800 +350 = 1 500 ? Et par un JSC, les implanter en fond de la Fenêtre du Navigateur, l'une à droite, l'autre à gauche. Soit grand maximum 67 Ko... Notons au passage que la hauteur a été réduite, en supprimant toute la partie noir en bas ? Une couleur de fond paramétrée en noir nous donnera le même résultat !
Enfin, plus simple, supprimer la partie recouverte par notre Page, dans ce cas de 351 à 1 150, ce qui diminuera l'algorithme de création du fichier de l'image, pour la visibilité de la démonstration, remplacée par du blanc. PLUS que 88 Ko, soit pratiquement la moitié du poids initial ?
Pour information, l'image originale de la démonstration ci dessus était en .png, et pesait 2,02 Mo... Une HONTE pour un "professionnel" du "Web" ? Rien que passer en .jpg a diminué son poids par plus de douze ! ! ! A qualité égale ! Surtout pour l'usage qu'il en fait ?


Ce qui nous fait déboucher sur un autre "détail", d'importance, lui aussi ?
Car une autre astuce consiste lors de la création d'une image à choisir plusieurs formats quant à l'enregistrement ! Nous disposons en standard sur nos machines et programmes des choix suivants : .bmp, .jpg, .gif, .png.
D(où ce que je n'ai cessé de répéter sur l'autre Forum, par ordre de préférence .jpg, puis parfois .gif, ou pour des causes de tranpasrance voire d'animations, enfin exceptionnellement .png, mais dans des conditions particulières, d'autant qu' Internet Explorer présente fréquemment des défauts pour afficher ce format ?
Pour des usages spécifiques, concernant les Sites spécialisés comme ceux des photographes, Artistes, ou traitant de science, nature etc., il y a des astuces quant à pouvoir bénéficier des avantages du format .png, détaillées ici :

http://forum.abc-d-xwd.com/index.php/topic,42.msg175.html#msg175


"Voili voilou" dirait "Davlent", vous en savez un peu et même beaucoup plus maintenant ? Cordialement, Yvanoph---

Journalisée

La théorie, c'est quand on sait tout mais qu'absolument rien ne fonctionne !

La pratique, c'est quand tout fonctionne "farpaitement" sans vraiment savoir pourquoi, ni d'ailleurs  chercher à comprendre...

Chance inouïe, ici théorie et pratique fonctionnent  !
yvanoph
Administrator
Hero Member
*****
Hors ligne Hors ligne

Messages: 2 818


Le PIRE des défauts, ne pas RECONNAÎTRE une erreur


Voir le profil WWW
« Répondre #3 le: Ven. 31 Mai 2013 à 10:52:59 »

Là, c'est généralement une CATASTROPHE ! ! ! Et les raisons en sont hélas multiples...

La toute première en est la fainéantise, pour ne pas dire plus ?
Car DSCN00365.jpg, que voulez vous qu'en fasse un robot ? D'autant qu'avec le nombre incroyable d'images publiées sur le Web, il y en a COMBIEN qui sont nommées de la même façon... De même A156238749.jpg ? ou toutes autres bêtises du même genre, comme Logo.jpg, Accueil.jpg, fond_standard.jpg ?
Autant de points de Référencement jetés bêtement à la "Ploubelle", pffff...

Alors, employer des Noms de fichier plus "expressifs", en n'oubliant JAMAIS que les robots ne savent QUE lire des mots COMPRÉHENSIBLES ! ! !
Ce qui veut dire DEUX choses :
N'employer QUE des lettres standard, à savoir les vingt six lettres de l'alphabet plus les dix chiffres, MAJUSCULES tolérées ! Les accentuées, les espaces, les caractères spéciaux comme /, & etc., IN TER DITS ! ! ! Car les noms de fichiers doivent respecter le standard, les Normes informatiques, aussi remplacer les espaces par l' "underscore", ou "trait souligné", le caractère en dessous du chiffre 8 ? Et conserver les traits d'union normalement.
Avec des noms de fichiers devenus "intelligents", en fait compréhensibles comme une bonne phrase en bon Français, excepté les accents, les robots auront du grain à moudre ! Et vous feront une bonne place en Référencement ?
MIEUX, vos images iront probablement rejoindre la base de données mondiale, et là vous pouvez espérer que des clients potentiels, à la vue des vignettes de vos images vont cliquer dessus et débouler sur votre Site ?
C'est le cas pour près d'un tiers des Visiteurs de deux Sites professionnels, en ce qui me concerne, comme quoi ? Comme quoi c'est un effort qui en mérite la peine ! ! !

Par ailleurs, vous pourriez, pour des raison pratiques, donner des compléments d'information à ces noms de fichier, pour exemple le "Logo Face de Bouc" publié sur la Page ci dessous :

http://forum.abc-d-xwd.com/index.php/topic,8.msg168.html#msg168,

où le fichier est nommé FaceBook_40x40.jpg. J'aurais même plus simplement pu le nommer d'ailleurs FB_40x40.jpg ? Ça, c'est pour faire court, rapide et pratique pour mon usage personnel en l'introduisant dans la Médiathèque d'XWD dans un /Répertoire nommé "Icones", lui même dans un /Répertoire /images  (TOUJOURS de l'ordre et de la méthode quant nous manions des fichiers...) ! Notons AUSSI que j'aurais pu même avoir à coté un FB_60x60.jpg, ne sachant trop lequel employer de suite ?
Bref, les Pages finies, ou même que partiellement, mais la charte graphique ayant poussé à choisir le format de 60 x 60 pixels par exemple, autant supprimer de la Médiathèque ce qui est inutile ? Nous économiserons ainsi nos ressources voire diminuer le poids de notre fichier Site...

Mais ce n'est PAS tout ? Car à la Publication, XWebDesignor va nous publier ce fichier sous FB_60x60.182.jpg par exemple, le 182 voulant simplement dire que c'est le cent quatre vingt deuxième objet introduit dans la Médiathèque ! (A la réflexion, j'aurais du prendre un chiffre plus simple à écrire ? Mais bon, c'est fait, c'est FAIT...) Et QUE croyez vous que vont en penser les robots, d'un tel nom de fichier ? Beurk, recraché ! Alors si ce nom est assez explicite en mode "construction", NE PAS oublier, une fois la Médiathèque nettoyée du superflu, de redonner un nom "intelligent", car FB, ça ne veut rien dire, quant à 60x60, les robots sauront le lire tout seul, le format, comme vous au survol du fichier dans l'explorateur par exemple ? D'où renommer par "Lien_social_Face-Book_bleu.jpg", ce qui donnera bien plus de consistance pour augmenter votre Référencement ? Et en profiter pour remplir la Case "Commentaire", à droite, car ce sera SON contenu qui sera affiché dans l'attribut "alt" de la Balise "<img>" affichant votre image ! ! ! Et en évitant d'employer le même texte, tant qu'à faire ? ? ?


Bon, désolé de vous avoir "donné bien du boulot", mais maintenant que vous savez à quoi vous en tenir, à vous de faire vos choix en toute connaissance des conséquences ?


Bien amicalement, Yvanoph---

Journalisée

La théorie, c'est quand on sait tout mais qu'absolument rien ne fonctionne !

La pratique, c'est quand tout fonctionne "farpaitement" sans vraiment savoir pourquoi, ni d'ailleurs  chercher à comprendre...

Chance inouïe, ici théorie et pratique fonctionnent  !
gb87
Hero Member
*****
Hors ligne Hors ligne

Messages: 1 247



Voir le profil WWW
« Répondre #4 le: Ven. 31 Mai 2013 à 10:59:57 »

Bonjour,
Effectivement, devant le poids des images de fond sur certaines de mes pages, j'ai déjà décidé d'en supprimer complétement une, (dans le [Plan du site], notamment). Cela ne m'a semblé plus utile aujourd'hui, même si cela m'avait amusé de le faire. Je me suis mis "de l'autre coté de l'écran" (Zut y'a RIEN ! ! !  ...faut que je repasse du bon coté pour voir au moins ce que j'écris!) et j'ai compris que cela n'apportait rien de bien spécifique en plus à la page, donc ===> dégagée.
Pour le reste , comme à l'accoutumé, je finis de "perdre du poids", bien que cela se termine à mon goût. On peut toujours en perdre un peu plus, c'est vrai aussi !
Je vais passer  ensuite à l'étude de ce que vous préconisez pour les fonds ? J'ai lu vite fait, "en diagonale", et comme je n'ai pas tout saisi du premier coup, je vais me pencher un peu mieux sur ce "détail".
Merci encore.
@+Guy

Journalisée

Il est humain de se tromper, persévérer dans l’erreur est diabolique ... en quelques mots: Errare humanum est, perseverare diabolicum...

Je fonctionne avec 1 PC, sous Windows Seven Pro.
J'utilise IE version 11.0.9600.17801 (Enfin quand çà fonctionne!) + Firefox  (Dernière version)
yvanoph
Administrator
Hero Member
*****
Hors ligne Hors ligne

Messages: 2 818


Le PIRE des défauts, ne pas RECONNAÎTRE une erreur


Voir le profil WWW
« Répondre #5 le: Ven. 31 Mai 2013 à 13:53:27 »

ou LA pire ? ET vous allez comprendre de suite comment certains de nos efforts sont réduits à néant...


Prenons la génération conventionnelle de Boutons dans XWebDesignor ? Pour exemple, dans le Site analysé suite à une demande dans le Fil :

http://forum.abc-d-xwd.com/index.php/topic,8.0.html

Il y avait certes beaucoup à faire, et son responsable, en ayant bien pris conscience, a opté pour de bonnes décisions puis appliqué ces dernières et les mesures nécessaires !
Néanmoins, au sommet, une ligne de Boutons, au format texte, toute simple, et qui, par définition, devrait être excellent pour le Référencement puisque constituée de mots en BON Français, donc lisibles, soit exploitables pour les robots ?
Son concepteur avait même eu l'idée de générer un effet de couleur au survol, par un script inséré initialement dans le Code de sa Page, via un JSC "html" ?

http://forum.abc-d-xwd.com/index.php/topic,8.msg16.html#msg16,

où, après l'ensemble du Code en vert à propos de "Xiti", vous trouverez :

Bon, morceau suivant... OUI, celui vu par PERSONNE, qui est en bas à droite dans le vert, ce "truc"

alors que l'effet était déjà appliqué par XWD au survol des Boutons ? A preuve d'ailleurs, ce JSC supprimé, l'effet persiste, donc reste présent ?

Tout semblerait donc au mieux dans le meilleur des mondes ? Et bien NON, comme nous allons le voir dans le Code ci dessous, tiré du Bouton "Aspiration centralisée" :

<div id="obj10010" class="css24">
   <a title="TOUT de l aspiration centralisée" href="./Aspiration_1.html">
      <img border="0" onmouseout="this.src='./images/p108b10010Up.gif'" onmouseover="this.src='./images/p108b10010Ov.gif'" title="TOUT de l aspiration centralisée" alt="TOUT de l aspiration centralisée" src="./images/p108b10010Up.gif">
   </a>
</div>


Que trouvons nous ? Une "<div>", contenant un Lien "<a>", qui lui contient une image "<img>", laquelle changera par une fonction "Java Script" au survol, pour passer d'un Nom de Fichier "infâme", p108b10010, complété d'un "Up" à celui complété d' "Ov" ! (Cf. les deux premières images ci dessous)
Bon, si le Code généré est "farpaitement" correct, il n'y a AUCUN texte inclus dans ce Lien ? ? ? C'est pourtant IMPERATIF en matière de Référencement, alors que là nous ne disposons QUE des "title" et "alt" pour donner à manger au robots ? ? ?
PAS de Lien TEXTE en DUR ! ! ! Inadmissible, intolérable pour un professionnel !
D'autant que dans le cas présent, le concepteur, faute d'être averti de l'existence de ce défaut, n'a pu le parer, les deux "morceaux de texte" étant identiques, et en "mauvais" Français...
Solutions ? Oui, il y en a :
Ne pas passer par les Boutons, mais employer des JSCs adéquates, respectant les textes, voire les noms de fichiers si des images sont employées ?
Et, de suite, dans la Médiathèque, remplir la Case "Commentaire" avec un contenu explicite (La "alt") et différent de l' "Info Bulle" dans la création du Lien (Le "title"), sans oublier de mettre l'apostrophe "TOUT de l ' aspiration centralisée" !

Autre exemple, avec le Bouton "Notre livre d'or" dans la ligne du bas :

<div id="obj10019" class="css33">
   <a title="Ils l ont dit pour vous..." href="http://www.livre-dor.net/livre.php?livredor=7283">
      <img border="0" onmouseout="this.src='./images/p108b10019Up.gif'" onmouseover="this.src='./images/p108b10019Ov.gif'" title="Ils l ont dit pour vous..." alt="Ils l ont dit pour vous..." src="./images/p108b10019Up.gif">
   </a>
</div>


Même "punitions", donc même combat ? (Cf. les deux images suivantes)


Bien tristement, Yvanoph---

Journalisée

La théorie, c'est quand on sait tout mais qu'absolument rien ne fonctionne !

La pratique, c'est quand tout fonctionne "farpaitement" sans vraiment savoir pourquoi, ni d'ailleurs  chercher à comprendre...

Chance inouïe, ici théorie et pratique fonctionnent  !
gb87
Hero Member
*****
Hors ligne Hors ligne

Messages: 1 247



Voir le profil WWW
« Répondre #6 le: Mer. 05 Juin 2013 à 08:22:20 »

Enfin un forum où on vous dépanne en moins de deux ! Ça c'est agréable. Merci Yvanoph !
@+ GB87

Journalisée

Il est humain de se tromper, persévérer dans l’erreur est diabolique ... en quelques mots: Errare humanum est, perseverare diabolicum...

Je fonctionne avec 1 PC, sous Windows Seven Pro.
J'utilise IE version 11.0.9600.17801 (Enfin quand çà fonctionne!) + Firefox  (Dernière version)
Tags: Fichier: Nom de... JSC: Référencement SEO Image: Format Copy-Right Image: Poids 
Pages: [1]   Haut de page
  Imprimer  
 
Aller à:  

Propulsé par MySQL Propulsé par PHP Powered by SMF 1.1.20 | SMF © 2013, Simple Machines
Soutenir Yvanoph par un Don ?
Boréal - V 1.0 by Yvanoph | Sitemap
XHTML 1.0 Transitionnel valide ! CSS valide !
Page générée en 0.145 secondes avec 21 requêtes.