Aller au menu - Aller au contenu

Icône Préambule

Avatar
Par Avatar Ceriko
Mise à jour : 18/12/2010
Difficulté : Facile Facile Durée d'étude : 10 minutes
933 visites depuis 7 jours, dont 62 sur ce chapitre classé 134/786
Nous allons ici discuter de notre projet.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Sommaire Chapitre suivant
Retour en haut

Notre objectif



Notre projet plus en détail


Je vous propose ici un tuto TP destiné aux apprentis Zéros dans le but de réaliser un diaporama simple et sympa en XHTML & CSS. Mais cela ne veut pas dire que notre diaporama sera ennuyeux, ne vous inquiétez pas.

Le but de notre TP sera d'obtenir un diaporama en affichant des petites photos en périphérie de celui-ci et en gardant l'espace central complètement vide. Par exemple, un ensemble de 10 éléments de côté (ayant une capacité totale de 10 × 10 = 100 éléments) offrirait la possibilité de présenter un diaporama de 36 photos autour d'un espace libre de 64 cases (8 en largeur et 8 en hauteur).

Ensuite, en passant le curseur de la souris sur ce qui s'avère être en fait des miniatures (nos photos en périphérie), la photo désignée s'affichera au centre, et sa taille occupera l'espace libre du milieu (grand comme 64 miniatures). Cela nous offre autant d'agrandissements par 64 que nous le souhaitons sans rechargement de page ni clic, toutes les photos étant chargées une fois pour toutes à l'ouverture de la page. Puis, en déplaçant simplement la souris de miniature en miniature, chaque photo s'affichera en grand très rapidement.
Tout cela dans un diaporama original, simple et néanmoins efficace !

Image utilisateur
Diaporama de 36 photos


Séance de questions − réponses


Un TP juste pour ça ? o_O

Vous verrez que nous aurons de nombreuses occasions d'apprendre, de revoir et d'approfondir des choses !

36 photos par diaporama ? Dommage, j'aurais préféré en mettre 50 !

Ce nombre est arbitraire, il sera très facile d'adapter le diaporama à vos envies les plus folles.

Comment fait-on si l'on a un nombre de photos impair ? Ça va laisser un trou quelque part…

Bien vu ! En effet, ce choix de diaporama nous impose de présenter un nombre de photos qui se doit d'être multiple de 4, sans quoi il resterait des « cases » vides… et cela ne ferait pas très joli.

Tu ne voudrais pas nous montrer un diaporama en ligne pour qu'on puisse voir le résultat ?

Je pense que vous avez zappé l'introduction pour me demander ça. Allez donc lire ce qu'elle contient, ça pourrait vous être utile.
Retour en haut

Une histoire d'agrandissement

Nous voulons que notre agrandissement s'affiche au milieu des miniatures sans les cacher.

Dans l'exemple qui va nous intéresser au long de ce TP


Prenons l'exemple ci-dessus (diaporama de 36 photos) pour calculer la taille de notre agrandissement… On voit qu'il recouvre une surface libre équivalente à 8 miniatures de haut et de large, la surface d'agrandissement est donc égale à 8 × 8 = 64 fois la taille d'une miniature, ce qui représente bel et bien un agrandissement. La taille réelle dépendra de la taille de nos miniatures.

Diaporama de 36 photos
Diaporama de 36 photos (zoom × 64)


Diaporama avec un nombre de photos différent


Et si nous avions choisi de créer un diaporama de 8 photos, ça nous aurait donné quoi ?

Diaporama de 8 miniatures
Diaporama de 8 photos (zoom × 1)


Aïe ! Il n'y a pas d'agrandissement…

Autre exemple :

Diaporama de 12 miniatures
Diaporama de 12 photos (zoom × 4)


12 est donc le minimum de photos que notre diaporama peut supporter, mais plus, c'est mieux :

Diaporama de 20 miniatures
Diaporama de 20 photos (zoom × 16)


Tableau récapitulatif


Je tiens ici à vous montrer comment évoluent la taille de l'agrandissement et la proportion de l'agrandissement en fonction du nombre de photos, par tranches indivisibles de 4.
L'agrandissement augmente de façon exponentielle mais la proportion de l'agrandissement, elle, se tasse.

Nombre de photos Agrandissement Proportion de l'agrandissement
par rapport au diaporama entier
8 × 1 11 %
12 × 4 25 %
16 × 9 36 %
20 × 16 44 %
24 × 25 51 %
28 × 36 56 %
32 × 49 60 %
36 × 64 64 %
40 × 81 67 %
… … …



On peut en déduire les formules suivantes :
  • agrandissement = (nbre_photos / 4) - 1)² ;
  • pourcentage de l'agrandissement = (1 - (nbre_photos / (nbre_photos + zoom))) × 100.

Les formules que vous pourrez voir ici et là dans ce TP ne sortent pas de mon chapeau ( :magicien: ), elles découlent simplement de la forme de notre diaporama.
Si elles vous embêtent, vous n'avez qu'à les ignorer pour l'instant !

Vous avez pu constater que plus nous avons de photos dans notre diaporama, plus le pourcentage d'espace occupé par notre agrandissement est grand.
Par exemple, dans notre exemple avec 36 photos, l'agrandissement représente 64 % de la surface totale de notre diaporama.

Pour obtenir un effet esthétiquement agréable, je vous conseille de ne pas trop descendre sous la barre des 50 % (pas moins de 20 photos par diaporama), c'est-à-dire que la surface de vos miniatures ne doit pas trop dépasser celle de votre agrandissement. Sinon, votre agrandissement risquera de paraître ridiculement petit.

Grâce à tout ça, vous choisirez le nombre de photos en toute connaissance de cause !
Retour en haut

Des photos dans notre diaporama



Le format de nos photos


Là, ça dépend de chacun. J'aime les diaporamas carrés, d'autres préféreront le format portrait ou paysage. Peu importe en fait (quoique la logique tendrait vers les diaporamas au format paysage puisque c'est aussi le format de nos écrans). Ce qui compte surtout, c'est qu'elles aient toutes la même proportion ! Paysage avec paysage, portrait avec portrait et panoramique avec panoramique, sinon bonjour les horreurs…

Image utilisateur Diaporama de 36 photos Image utilisateur
Formats portrait, carré et paysage

Mais toi, tu vas choisir quoi tout au long de ce TP ? Ah ! non, non, je ne veux pas copier-coller bien sûr, je demande juste par curiosité…

Dans mes exemples, je vous présenterai un diaporama carré, mais si vous préférez utiliser des photos au format paysage ou autre, libre à vous ! Le code sera suffisamment bien détaillé pour que vous puissiez l'adapter à votre goût.

Et puis, l'inconvénient avec les photos carrées… c'est qu'il faut d'abord les transformer !

Transformer une image avec The Gimp


Secret (cliquez pour afficher)
Ce que j'explique ici paraîtra extrêmement facile à la plupart des lecteurs, mais je veux que ce TP soit accessible à tous. Que ceux qui sont totalement à l'aise ignorent cette section !

Je vous fais confiance pour ce qui est de trouver 36 photos, passons directement à la suite. :)

Rognage


Quand on veut changer les dimensions d'une image en n'en sélectionnant qu'une partie et en gardant intacte la proportion, il faut supprimer une partie de l'image. On appelle cela « rogner » une image. Pour ce faire, on utilise un logiciel de traitement d'images. Je vous en propose un qui est connu, gratuit et open source : The Gimp (il existe en outre un tutoriel à propos de The Gimp en cours d'écriture sur le SdZ).

Une fois ce logiciel installé, il suffit d'ouvrir une photo (sous Windows : Ouvrir avec → The Gimp) afin que le logiciel ouvre l'image. Vous pouvez également très bien lancer The Gimp et ouvrir l'image à partir du logiciel (Fichier → Ouvrir → Sélectionner une photo dans l'arborescence), ou encore utiliser la combinaison de touches Ctrl + O (O pour open en anglais). Dans tous les cas, on arrive au même résultat.

Je vais maintenant fournir une méthode rapide afin d'obtenir des photos carrées de 400 pixels de côté (c'est ensuite à vous d'adapter la taille à votre convenance). Je ne suis pas du tout expert en la matière, mais ça a au moins le mérite de fonctionner. N'hésitez pas à vous référer au tutoriel sur The Gimp en cas de besoin !

Procédure à suivre une fois qu'une photo est ouverte dans The Gimp :

  1. Dans la fenêtre de gauche, appelée « Boîte à outils », activez l'outil de sélection (le rectangle en pointillés en haut à gauche).
  2. Dans le menu des options de cette même fenêtre, activez « Étendre depuis le centre » (ce n'est pas du tout une obligation, essayez aussi sans et voyez ce qui vous convient le mieux).

    The Gimp — Boîte à outils
    The Gimp — Boîte à outils

  3. Cliquez sur la photo (en maintenant le clic enfoncé) au centre de la partie que vous désirez garder, et agrandissez le rectangle jusqu'à obtenir les conditions suivantes.
    • Vous obtenez un carré (ou toute autre proportion voulue ; pour vous en assurer, vérifiez la taille de la sélection en bas de l'image (« Rectangle : 420 × 420 », par exemple) ou dans le champ « Taille » de la fenêtre « Boîte à outils », comme dans la photo ci-dessous). Votre sélection doit mesurer au moins 400 pixels de côté, puisque l'on souhaite exploiter des photos de 400 × 400 pixels dans notre exemple. Que votre sélection mesure 456 × 456, 561 × 561 ou encore 987 × 987 pixels, cela ne fait rien tant que la proportion voulue est gardée.

      Rognage sur The Gimp
      Rognage sur The Gimp

    • Ne sortez pas du cadre de la photo, sinon l'image ne sera pas pleine ! Notez qu'il est possible de déplacer la sélection : pour cela, il faut d'abord avoir cliqué sur l'élément portant les quatre flèches bleues dans la boîte à outils (deuxième ligne, cinquième élément en partant de la gauche). Il est même possible d'utiliser les flèches du clavier pour un positionnement plus fin.
    • La sélection doit vous convenir, sinon cliquez d'abord à l'extérieur de la sélection pour faire disparaître la sélection en cours et recommencez l'opération jusqu'à satisfaction.
    • Lorsque vous avez terminé, il vous faut copier la sélection afin de la réutiliser. Pour ce faire, cliquez sur Édition → Copier ou utilisez le raccourci Ctrl + C (C pour copy) lorsque le curseur cible la sélection.

La première étape est maintenant terminée.

Création de l'image rognée


La sélection qui vous convient est pour l'instant bien au chaud dans le presse-papier. Admettons qu'elle fait 420 × 420 pixels ; nous devons à présent ouvrir une fenêtre pour l'y coller.

Rendez-vous dans Fichier → Nouvelle image ou utilisez Ctrl + N (N pour new) et inscrivez dans les champs « Largeur » et « Hauteur » les valeurs de votre sélection (deux fois « 420 » dans notre exemple). Cliquez ensuite sur « Valider » : une fenêtre vierge aux dimensions requises s'ouvre.

Allez dans le menu « Édition » de la fenêtre vierge et cliquez sur « Coller » ou actionnez les touches Ctrl + V.
Si tout s'est bien passé, votre sélection doit correspondre parfaitement aux dimensions de la fenêtre (sinon, il faudra recommencer !).

Redimensionnement


Nous possédons enfin cette image tant espérée ! Cependant, ses dimensions sont trop grandes (du moins supérieures à 400 × 400 pixels), vous voudrez peut-être la redimensionner.

Allez dans « Image » puis cliquez sur « Échelle et taille de l'image » ; changez la largeur et la hauteur pour « 400 » pixels, cliquez sur le bouton « Échelle » et vous aurez presque fini !

Sachez qu'il est tout à fait possible de laisser l'image dans sa taille actuelle puisque dans le fichier CSS, nous forcerons de toute façon la taille des images, et si cette taille est inférieure à celle de l'image, cela ne perturbera en rien la présentation de notre diaporama. Mais il faut savoir que si vos images font par exemple 1200 × 1200 pixels alors que vous n'avez besoin que de photos de 400 × 400 pixels, les personnes qui ouvriront votre page internet recevront des images neuf fois plus lourdes que nécessaire (1200 × 1200 / 400 × 400 = 9) et cela cassera la fluidité de votre ouvrage. De même, si la taille réelle de votre image est inférieure à ce qui est indiqué par le CSS, alors votre image sera automatiquement agrandie et la qualité aura toutes les chances d'être mauvaise.


Enregistrement


Notre première image est presque prête ! Il suffit maintenant de l'enregistrer.

Cliquez sur Fichier → Enregistrer (ou utilisez Ctrl + S pour save) et renseignez le nom de l'image, par exemple « 1.jpg », puis appuyez sur Entrée (il est probable que plusieurs fenêtres s'ouvrent consécutivement à celle-ci ; si vous ne savez pas pourquoi, pressez simplement la touche Entrée ou cliquez sur « Enregistrer »).

La mauvaise nouvelle, c'est qu'il faudra répéter toutes ces opérations pour chacune des images ! Par ailleurs, il ne faut pas oublier d'être cohérent dans les noms que l'on donne aux images, de « 1.jpg » à « 36.jpg » dans notre cas, ni de toutes les placer dans un même dossier qui leur sera propre.


Allez-y maintenant, sélectionnez des photos de vous dans les situations les plus loufoques ! Qui sait, on fera peut-être un vote un jour pour déterminer le gagnant du diaporama le plus insolite. :D


Intégrer des images


Fichiers ou URL ?

Bonne question. Il existe plusieurs façons d'importer des photos dans votre diaporama. Si vous ne voulez pas vous embêter, je vous conseille de vous contenter des URL des photos que vous avez peut-être déjà stockées sur Picasa, Facebook ou autre.

Effectuez un clic droit sur une image en ligne puis cliquez sur « Enregistrer l'URL de l'image » (attention, ne faites pas ça sur une miniature car la qualité serait sûrement très mauvaise !). Il suffit ensuite de coller l'adresse dans le code sans se soucier d'un quelconque dossier « Images », et votre diaporama tout entier tiendra dans un unique fichier de moins de 10 ko !

Sachez qu'il vous est possible de raccourcir l'URL d'une image sur un réducteur d'URL (URL Shortener). Par exemple, l'image de Zozor (http://www.siteduzero.com/Templates/im [...] /2/zozor5.png) devient http://goo.gl/iyDsh grâce au URL Shortener de Google (http://goo.gl/). Je vous dis ça parce que les adresses des images issues de Facebook sont souvent très longues.

Code : HTML
1
<img src="http://sphotos.ak.fbcdn.net/259 (…) 89_612671_n.jpg" alt="Image de profil Facebook" />


Comprenons-nous bien


Que vous utilisiez un dossier d'images ou des liens et tant que les proportions sont les mêmes, peu importe que les tailles diffèrent (par exemple, deux photos de 720 × 540 et 800 × 640 pixels ont des proportions égales (5 / 4) et presque la même taille). Mais sachez que la résolution de votre diaporama sera limitée par la photo qui aura la plus faible résolution. Il est donc important de garder le tout le plus homogène possible.

Pour ma part, en qualité de bon élève, j'ai à disposition un dossier de 36 images carrées et je décide que les miniatures feront 50 pixels de côté, histoire d'obtenir un diaporama de 500 pixels de haut et de large (50 pixels × 10 miniatures = 500 pixels). Et mes images font 600 × 600 pixels, suffisamment pour avoir de quoi combler l'espace libre au milieu des miniatures (400 × 400 pixels) et même un peu de marge pour la suite du TP…

Je le répète, si vous voulez des agrandissements de 600 × 480 pixels par exemple, faites-vous plaisir ! Vos miniatures feront alors 75 × 60 pixels, et votre diaporama, lui, mesurera 750 × 600 pixels, et ce sera parfait.

Au cas où ce ne serait pas clair pour tous : pour un diaporama de 36 photos, on utilise en tout et pour tout 36 photos de la résolution de votre choix. Les miniatures ne sont que les originales redimensionnées, ce qui fait que lors d'un agrandissement, la même image est montrée deux fois dans deux formats différents, comme sur cet exemple (la deuxième photo en haut à gauche est affichée en miniature et en agrandi) :

Image utilisateur

Retour en haut

Cadeau

Bon, je vois qu'il y en a plein qui galèrent pour trouver des photos et les redimensionner.

Mais comment est-ce que je vais bien pouvoir les aider ?


Solution


J'ai trouvé ! Étant l'auteur des photos que j'utilise dans ce tutoriel (quatre séries de 36 photos), j'autorise tout le monde à les télécharger et à les utiliser.

Elles sont au format 600 × 600 pixels, mais d'une qualité plutôt médiocre, vous m'en excuserez.
Le but n'est pas de vous donner des images précieuses, mais de vous permettre de disposer facilement de photos pour travailler dans les meilleures conditions possibles (sur une suggestion de mon validateur attitré, Thunderseb, que je remercie au passage pour ses bons conseils).

Histoire des photos


Ces photos ont été prises en août 2007 lors d'un voyage d'un mois, autant enrichissant que dépaysant, au Mexique et au Guatemala.
Il s'agit de photos des quatre cités mayas que j'ai préférées :

Les photos sont réunies dans une archive .zip que vous pouvez télécharger ici.
(Il est possible qu'on essaie de vous faire payer sur le site, mais sachez que vous avez droit à 100 Mo de téléchargement gratuit par jour.)

L'ensemble pèse 14,4 Mo pour 144 photos, soit une moyenne d'octets par photo assez facile à calculer. :)

Ainsi se termine notre premier chapitre, place maintenant à l'action !
Retour en haut
Alors, facile ou pas ? Bah oui, facile ! Allez, la suite…

Merci de laisser un commentaire si vous avez rencontré des difficultés ou si quelque chose ne vous paraît pas clair.
Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut

Lire aussi

Icône
Prêts pour notre mégadiaporama ?
Icône
Customisons notre diaporama… (2/2)
Icône
Quelques notions de CSS
Icône
TP : diaporama original en CSS
Retour en haut
1 commentaire pour "Préambule"
Note moyenne : 3.76 / 4 (38 votes)
Pseudo Commentaire
Hors ligne Benj9 # Posté le 17/04/2012 à 08:27:44
Avatar

 Lien mort, on peut plus télécharger les photos :'(
Image utilisateur

Codeur PHP/SQL/HTML/CSS en apprentissage du JS.
Tutoriel sur Algobox en Beta-Test.
Besoin d'avis
 

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.