mercredi 7 octobre 2015

L'Utilisation des Images

Dans les articles précédents on a aperçu qu'il manquait un peu de couleurs, des images et qu'il y avait beaucoup trop de textes. Pour améliorer ceci il faudra ajouter des images sur notre blog par différents moyens :
D'abord, il y a la touche : Prt Sc sur le clavier qui permet de photographier votre écran tel que vous le voyez, ensuite il faudra aller sur Microsoft Paint (Présent dans TOUS les windows) et puis appuyez sur : Ctrl + V et l'image s'affichera tout de suite et vous pourrez la modifier comme vous le désirez. Voici un petit exemple :
- Faisons une photo de notre joli petit blog, donc allez sur le blog et appuyez sur la touche Prt Sc.


















- Et puis allez sur Microsoft Paint, qui ressemble à quelque chose dans ce genre-ci :

















-Et enfin appuyez sur Ctrl + V et l'image devrait s'afficher et il ne restera qu'à l'enregistrer et à la mettre sur le blog.
















Un autre moyen, plus facile pour certains est d'utiliser le programme : Fast Stone Image Viewer. Allez-y, téléchargez et puis installez le programme.
Au premier coup d'oeil le programme a l'air d'être très compliqué à utiliser, donc faisons une sorte de tutoriel pour comprendre plus facilement.
-Tout d'abord, ouvrons le programme, une fois ouvert cliquez sur l'écran que vous voyez en haut à droite, il vous proposera différent moyens de faire une photo de votre écran :




Capture Foreground Window : vous photographiez le premier plan de votre écran.
Capture Window Object : Utile si on aimait avoir une image, un texte sans les détails autour, par exemple si on prenait une photo de la page Mozilla, on pourrait laisser toutes les barres d'outils de côté.
Capture Rectangle Region : Comme le nom le dit déjà, on peut former un rectangle sur l'écran contenant tout ce dont on a besoin.
Capture Freehand Region : tracez avec un crayon les limites des données dont vous avez besoin, des cercles, carrés, étoiles, enfin... tout ce que vous voulez.
Et puis finalement : Capture Full Screen : sert à capturer toute la fenêtre, avec la barre Windows en dessous et tout ce qui se trouve à côté.


Pour vous expliquer la suite, on va prendre une belle photo de la page d'accueil de notre blog.
Après l'avoir prise, elle devrait apparaître sur le bas gauche de la fenêtre du programme, cliquez deux fois dessus.


Normalement vous devriez voir l'image en plein écran. Descendez avec la souris et une barre d'outils devrait s'afficher, si vous désirez modifier l'image, d'ajouter des flèches ou quoi que ce soit, appuyez sur la touche qui ressemble à un ''ABC'', cliquez dessus et une autre barre d'outil devrait apparaître avec laquelle vous êtes capable de modifier l'image comme vous l'aimeriez.
Reste qu'à enregistrer le nouvel image et c'est bon ! Si vous avez toujours des problèmes, ou que vous voudriez aller plus loin je vous conseille d'aller télécharger le tutoriel.
À part ça, il y a aussi d'autres moyens pour mettre des photos sur notre blog, tout simplement
à partir de notre ordinateur, ou une simple image sur internet.
Après cela on a encore parlé des différents formats d'images, en d'autre le : BMP, JPG, Gif et PNG.
La première différence se trouve dans la taille des différents formats, si on enregistrait une même image sous ces différents formats, l'espace qu'il occupera sera de tel ordre : BMP>JPG>PNG>Gif. Mais tout ceci peut toujours changer sous différents facteurs de compression.
Pixel : une image sur l'ordinateur est constituée de millions de pixels, chaque pixel représente une case dans une image, une couleur. Plus de pixels il y a dans une image, meilleure est sa qualité.
D'abord, le JPG (jpeg) : qui peut aller jusqu'à des milliards de différents couleurs, pratique pour des photos de haute qualité. Pour compresser la photo il retient à chaque fois que dans par exemple la première ligne, la case de la première colonne est jaune, les trois suivants blancs, il retient les couleurs des Pixels etc. Par contre, en compressant il perd quelques couleurs qui ne sont de toute façon pas très visibles à l'oeil humain, remarque, l'oeil humain voit environ 65000 couleurs différents. Par contre, sur certains sites ils disent différentes choses, certains disent que l'oeil humain n'en voit que 65000, d'autres disent que le nombre est à deux millions, celui qui trouvera une source fiable aura deux chocotoffs offerts par M. Schoubben, donc n'hésitez pas à chercher et de le mettre en commentaire ! ;)
Et puis il y a les images Gif : Pratique pour les clip arts, peut aller jusqu'à 256 couleurs (à l'époque la limite était de 16 couleurs ...)
Et puis les images PNG : si on aimait avoir des images occupant moins d'espace, le format PNG n'a que quelques millions de couleurs, il les compresse pour les enregistrer, mais ne perd pas en quantité de couleur, si une image a 10000 couleurs, elle en aura toujours autant après avoir été compressé. Remarque ! Internet Explorer que nous, nous avons à l'école (Internet Explorer 6) ne lit pas les formats PNG, d'ailleurs c'est pour ça et de nombreux d'autres raisons qu'à l'école on utilise plutôt Mozilla Firefox. (Par contre, Internet Explorer huit le permet) ce sera probablement le format qui remplacera le Gif bientôt, vu qu'ils ont beaucoup plus de couleurs
et pour de nombreux autres raisons. Une de ses autres avantages est la possibilité de mettre de la transparence.
Et finalement, reste encore le BMP (bitmap), il est peu utilisé de nos jours parce qu'il prend trop de place.
Évidemment, comme vous le constatez, ceci n'est pas une matière facile à comprendre, donc moi Mitchio et surtout M. Schoubben vous conseillons d'aller voir sur ce site-ci qui explique beaucoup plus en détail ce qui parle de compression.
Voilà, cette fois-ci je pense et j'espère que c'est tout ... :P allez y pour mettre des commentaires ;)

10 commentaires:

Grégory a dit…

C'est pas si mal.
Par contre j'ai des petites remarques:

Non on utilise pas ff à l'école car IE ne sait pas lire les images PNG mais pour un ensemble de choses.

Microsoft n'a pas mis à jour des années leur browser et ont commencé à créer des trucs qui ne respectent pas les standarts du W3C et donc les webmasters ont utilisé du langage propriétaire de microsoft. (Je pense particulièrement au JS...)

Et aussi au niveau du design, ils ont pas mis leur navigateur à jour des années donc, les nouvelles propriétés du W3C sont pas instauré. (et donc le rendu de la page n'est pas ce qu'elle devrait être)

C'est d'ailleurs pour ça pour les images PNG qu'elles ne savAIENT pas être lues. (elles le sont maintenant sur les dernières versions de IE... apparement, Microsoft est prêt à tout pour reprendre des parts du marché sur son browser)


Tu as aussi oublié de dire quelque chose d'important est que les images PNG supportent la transparence.




"Après cela on a encore parlé des différents formats d' images , en d'autre le : JPG , Gif , et PNG .
La première différence se trouve dans la taille des différents formats : JPG > PNG > Gif"


Non tu ne peux pas dire ça !
Ca dépend vraiment de l'image, des couleurs, de la précision (dégradé, ...), du nombre de pixels, ...
Une image PNG par exemple peut être plus petite qu'une JPG. (c'est plus rare mais ça arrive par exemple quand c'est un graphique, il est préférable d'utiliser le PNG. Tu peux le rajouter dans ton billet au passage)


Voilà, j'espère que ça t'aura un peu éclairci sur la chose.

Grégory a dit…

Petite note: le lien plus haut est W3C.

Et quand je parle du JS, je ne veux pas qu'il y ai de sous-entendu, je ne dis pas que c'est un langage de MS mais que MS créé des propriétés propriétaires à MS. (et donc peuvent pas être lues pour les autres navigateurs tels que ff, opera, safari, konqueror, Google chrome, ..)

Mitchio a dit…

merci grégory ... mais je ne sais plus vraiment si on avait parlé du W3C et tout ça , donc je ne suis pas obligé de le noter non ?? enfin , merci quand même , je vais essayer de corriger les autres choses alors ... ;)

Grégory a dit…

Non, vous n'en avez probablement pas parlé, c'est pas très utile d'en parler. ;)
Je te propose juste à rajouter dans ton billet les formats qui accepte la transparence comme le gif et le png par exemple.

(Merci d'avoir lu mon long commentaire)

Lisiane a dit…

- je te conseil de mettre une virgule juste après 'Et puis, '
- one dit mieux 'de nombreuses autres raisons'
voilà, c'est tout ce que j'ai trouver

F. Schoubben a dit…

Après la trêve de Noël, voici le retour des corrections...

Au niveau du fond :
* Tu dis « il faudra ajouter des images sur notre blog par différents moyens » et ensuite, tu parles des différents moyens de faire des captures d'écran. Les captures d'écran ne sont qu'une possibilité d'ajout d'images. Il est aussi possible d'en trouver sur Internet, sur son disque dur... Il faudrait le préciser dans ta phrase,
* Microsoft Paint est bien présent dans tous les Windows... mais inutilisable pour des captures d'écran dans certaines versions, entre autres dans la version installée à l'école (Windows 2000),
* il est préférable de mettre un lien vers le site officiel [http://www.faststone.org/] plutôt que vers un site proposant un téléchargement. CNet est relativement sûr (d'autres pourraient en profiter pour installer un spyware), mais vous n'aurez peut-être pas la dernière version,
* au niveau des formats de fichiers image, j'ai aussi abordé (très rapidement) le .bmp, qui est du Bitmap. J'ai dit qu'il était peu utilisé de nos jours parce qu'il prenait beaucoup de place... Et tes images sont en bmp :-). La prochaine fois, enregistre les en .png (ou .jpg),
* en ce qui concerne tes explications sur les formats d'image, j'ai beaucoup de mal à voir ce que tu veux dire... Ce n'est pas un sujet facile, mais n'hésite pas à me poser des questions ni à aller chercher des infos supplémentaires sur Internet, parce que pour l'instant, cette partie ne doit pas être compris par grand monde,
* "l'espace qu'il occupera sera de telle ordre : JPG > PNG > Gif" : ça m'étonnerais beaucoup que j'ai dit ça... Il y a des facteurs de compression qui peuvent changer et cela dépendra aussi de l'image de départ (un clipart sera géré différemment d'une photo par exemple). L'utilisation sera différente, en particulier, les jpg seront pour les photos, les gif pour les cliparts (les 'dessins' sur l'ordinateur) et le png pourra remplacer avantageusement le gif (plus de couleurs, gestion de la transparence...);
* depuis le cours, j'ai remarqué que le nombre de couleurs que l'oeil humain peut distinguer change selon les sources. Sur certains sites ils parlent de 65000, sur d'autres de 2 millions. 2 chokotoffs à celui qui trouve une source fiable et récente,
* ton "pour compresser la photo il enregistre les cases par case , en d'autres il retient que par exemple les 3 premiers cases de Pixels sont blancs,les suivant jaunes etc ... " serait avantageusement remplacé par un lien vers une explication compréhensible sur un autre site Internet, comme celui-ci par exemple. Pour le trouver, j'ai tapé "compression d'images" dans mon moteur de recherche et j'ai lu quelques pages du premier lien pour trouver la partie compréhensible (à mon avis),
* que fait ta définition de "pixel" au milieu des formats de fichiers d'image ? Tu aurais dû commencer par définir pixel, puisque tu en as besoin après, puis de passer aux formats de fichiers. Quand on tape du texte, il est très facile de revenir en arrière, et il ne faut jamais s'en priver pour rendre le texte compréhensible,
* c'est Internet Explorer version 6 (version installée à l'école) qui ne permet pas de voir les fichiers png. La version 8 le permet,
* l'autre avantage du png, comme dit ci-dessus, est la possibilité de mettre de la transparence,

F. Schoubben a dit…

Au niveau de la forme :
* les images ajoutent beaucoup de clarté, c'est bien,
* il n'y a qu'un lien, tu pourrais en mettre au moins 3 ou 4 en plus (sur les formats d'image, sur la compression, sur un tutoriel externe pour le logiciel...), c'est un point bêtement perdu,
* il n'y a aucun libellé à ton article, deux points bêtements perdus,
* tu pourrais mettre le lien sur le nom et pas "en clair", par exemple, en cliquant sur "Fast Stone Image Viewer", on pourrait arriver sur http://download.cnet.com/FastStone-Image-Viewer/3000-2192_4-10324485.html?part=dl-FastStone&subj=dl&tag=button,
* ton "Plus de pixels il y a dans une image plus elle est de meilleure qualité" devrait être "Plus de pixels il y a dans une image, meilleure est sa qualité",
* Bonpatron retrouve plus de 10 fautes d'orthographe, sans compter la ponctuation... On peut ne pas être fort en orthographe, mais on ne peut pas en laisser autant quand les outils à votre disposition permettent de les éviter... Certaines sont faciles à éviter. La ponctuation est un problème récurrent chez toi. Il faut mettre une espace après un signe simple (un point, une virgule, des points de suspension...) et jamais avant. Pour les signes doubles (deux-points, point-virgule, point d'interrogation...), il faut une espace (insécable) avant et une après.

Bonnes corrections...

F. Schoubben a dit…

Mes remarques t'ont découragé ? Tu n'as pas envie de corriger ? Je ne vois rien de changé depuis que j'ai fait mon commentaire...

Mitchio a dit…

voilà, je pense avoir plus ou moins tout corrigé... il y a toujours un problème où je ne vois pas quoi faire, c'est quand j'entre des mots anglais ou des prénoms, le correcteur d'orthographe dit que c'est une faute ... dans ce cas je peux laisser ou plutôt essayer de trouver une autre solution ?

F. Schoubben a dit…

Ça a pas mal progressé, mais il reste encore plus de 10 erreurs retrouvées par Bonpatron... Et oui, les noms en Anglais et les prénoms sont toujours considérés comme une erreur par Bonpatron, mais tu ne dois pas en tenir compte...

Demande-moi en classe au prochain cours, je te montrerai ce qu'il reste comme erreurs et ce qui n'en est pas...

Au passage, il manque toujours les libellés... Si tu en ajoutes, dis-le-moi. Et mets des commentaires sur les autres billets, tu as besoin de ces points là...