Solution : Alléger les pages au maximum





télécharger 69.08 Kb.
titreSolution : Alléger les pages au maximum
date de publication04.10.2017
taille69.08 Kb.
typeSolution
m.20-bal.com > droit > Solution

Création d'un Site Web
Les images en Html5


Avant de commencer.

Nous partons du principe que vous savez utiliser un programme de traitement d'images ou photos, que ce soit PhotoFiltre, PhotoShop, Gimp, ou autre...

Quelques principes de base :

Le problème :


C'est bien évidemment la vitesse d'affichage de vos pages. Tout le monde n'habite pas dans des zones à très haut débit, et tout le monde n'a pas forcément un ordinateur ultra-rapide de "gamer".

D'autre part, à certaines heures, si de nombreuses personnes se connectent, c'est le "bouchon" des autoroutes de l'information !

Solution :


Alléger les pages au maximum.

Si on regarde la composition de nos pages, nous avons 2 éléments : du texte et des photos ou images.

Le texte ne pèse pas lourd en kilo-octets, c'est donc sur les images ou photos que nous pouvons agir.

Quel affichage pour les images ?


Pour des images affichées à l'écran, on a longtemps opté pour des définitions de 72px/pouce. Maintenant que nous avons des écrans plus grands, nous prendrons des définitions de 120px/pouce, sachant que, de toutes façons l'œil est incapable de distinguer 2 pixels au-delà de 150px/pouce.

D'autre part, pour tenir compte de la diversité des écrans, une taille d'image agrandie de 800x600 est un bon compromis.

Pour exemple, cliquez sur l'image ci-contre pour l'agrandir.

Cette image prise avec un Nikon3200, au format 6016x4000px en 300ppp, pèse au départ 11,4 Mo. Elle a été réduite en 800x600 pour l'image agrandie, et voilà ci-dessous, les résultats obtenus lors des sauvegardes en "jpg" avec PhotoFiltre :

Incidence de la taille, définition et compression des images. Cliquez pour agrandir.


Remarques

Pour la même image, en fonction de la taille et de la compression, nous passons donc de 536ko à 98ko pour une taille de 800x532px, puis pour la vignette de 200x133px, à seulement 8ko.

Les vignettes peuvent être suffisantes dans un récit.

Ensuite vous pourrez faire un agrandissement à 800x600px pour affichage à l'écran (ça passe très bien sur les smartphones) et pour des diaporamas.

Enfin si vous désirez les mettre à disposition pour des tirages photos éventuels, vous pourrez les mettre en tailles et qualités supérieures, les regrouper dans des fichiers "zip" et en proposer le téléchargement à vos lecteurs.

Pour ce qui est des poids des fichiers, vous aurez quelques écarts entre PhotoShop Elements et PhotoFiltre, surtout en ce qui concerne la compression des fichiers.

Pour un affichage Internet, ma préférence va à PhotoFiltre qui donne la possibilité d'inclure ou exclure les "infos exif" au moment de l'enregistrement, et qui, d'autre part permet un traitement par lots assez simple à utiliser. Voir cette page : 
PhotoFiltre Automatisation

Ecriture et propriétés :


Dans les pages précédentes, nous avons déjà vu la forme d'écriture pour des images :





Par défaut, la balise  est de type "inline". C'est pourquoi, dans la formule de base, nous devons la placer dans un paragraphe ou un titre. 
Elle suivra alors le cours de la ligne dans laquelle elle est insérée, forçant alors la hauteur de ligne, et provoquant des effets disgracieux.

Nous avons vu que par l'usage d'une "class", on peut lui donner des attributs qui feront positionner le texte tout autour, comme on le ferait dans Word.
Exemple :

1 - En partant de votre fichier modèle : "modules/exemples/modele.php", créez un nouveau fichier en le renommant : "modules/exercices/exerc016.php"

2 - Remplissez les lignes concernant le sous-titre, la description, les mots-clés et l'auteur, puis ajoutez dans la liste des "include" la commande pour la fonction "bla-bla" : 
include('../../controleur/fonct.php');


Voici maintenant les formules que nous allons utiliser :









3 - Assurez-vous que vous avez bien dans votre fichier "css" les "class" suivantes et,
au besoin, créez les : 
.image_gauche { float: left; margin: 0.2em; } 
.image_droite { float: right; margin: 0.2em; }


Pour les besoins du cours, voici 3 images à placer dans votre dossier "images/divers/"

Collection d'images regroupées dans une balise "
"

. -  - 

Une image simple dans le cours du texte.


4 - Dans votre fichier "exerc016.php" commencez par ceci : 
  
 

 
 
 

;Placer une image

 

Dans le cours du texte.

 

Cas d'une image  placée dans le cours du texte.
 
BoucleBlaBla($pmax,$nmax,$mot); ?>

Une image simple à gauche du texte.


5 - Dans votre fichier "exerc016.php" continuez avec ceci : 

Cas d'une image  placée à gauche du texte.
 
BoucleBlaBla($pmax,$nmax,$mot); ?>

Une image simple à droite du texte.


6 - Dans votre fichier "exerc016.php" continuez avec ceci : 

Cas d'une image  placée à droite du texte.
 
BoucleBlaBla($pmax,$nmax,$mot); ?>

Deux images simples à droite et à  gauche du texte.


7 - Dans votre fichier "exerc016.php" continuez avec ceci : 

 Ces images ont été insérées à  l'intérieur de la balise "p", dans le 1er paragraphe. L'image gauche est positionnée à  gauche de l'image droite (cqfd !). Il faut que le repère d'alignement soit placé en premier, donc dans la formule, on écrit image_droite et ensuite image_gauche !
 
er paragraphe. L'image gauche est positionnée à  gauche de l'image droite (cqfd !). Il faut que le repère d'alignement soit placé en premier, donc dans la formule, on écrit image_droite et ensuite image_gauche !"; 
BoucleBlaBla($pmax,$nmax,$mot); ?>

Résultat :


Vous obtiendrez ceci

 

Remarques :


Vous voyez dès la première, que les images sont de type "inline". (Elles ne provoquent pas de changement de paragraphe.)

Dans le dernier exemple, avec les 2 images à gauche et à droite, le 2ème paragraphe commence entre les 2 images et continue en dessous. Cela pourrait avoir un mauvais effet visuel si nous avions un titre à la place du 2èmeparagraphe.

Suppression du flottement :


8 - Dans votre fichier "exerc016.php" recopiez à la suite, le dernier exemple, et avant la partie du deuxième paragraphe avec la fonction "Blabla", ajoutez un titre de niveau "h5" pour obtenir le contenu suivant, fig2184 :



9 - Dans votre fichier "gabarit.css", écrivez les class suivantes : 

.stop_gauche { clear: left; padding-top: 1em;} 
.stop_droite { clear: right; padding-top: 1em;} 
.dessous { clear: both; padding-top: 1em;}


L'attribut "clear" peut prendre 3 valeurs : "left, right ou both". Dans les class ainsi créées, nous ajoutons un "padding-top" de 1em qui est la hauteur normale d'une ligne de texte, pour décoller celui-ci de l'image.

10 - Modifiez la ligne comportant le titre fig2184 repère 1, comme ceci : 
 class="dessous">Suppression du flottement :


11 - Tapez le raccourci clavier Ctrl + S pour sauvegarder.

12 - Revenez dans votre navigateur et tapez la touche F5 pour rafraîchir votre affichage. Vous devez alors obtenir ceci, fig2185 :


La balise 
 :


Au début de cette page, je vous ai montré 2 groupes de 3 images, 1 groupe pour les exemples de compression d'une image, et 1 groupe des 3 exemples d'images. 
On dit que les images sont de type "inline", mais là, elles sont regroupées dans un "bloc" désigné par la balise
 :

13 - Dans votre fichier "exerc016.php", écrivez les lignes suivantes : 

 
Collection d'images regroupées dans une balise.
 
 -  -  


Vous allez obtenir la présentation groupée des 3 images dans le bloc "figure". 
A l'intérieur de ce bloc, vous pouvez alors utiliser la balise 
 pour donner un titre ou une explication de cette collection.

Comme nous n'avons pas défini d'attributs spéciaux pour cette balise "figure", par l'utilisation d'une "id" ou d'une "class", les images s'alignent come du texte et vont prendre la largeur du conteneur "parent" le plus proche, à savoir pour nous "article".

Conlusion :


Vous savez maintenant placer des images à volonté, à gauche, à droite, des deux côtés, dans un bloc "figure".

Le bloc "figure" sera utilisé pour des "groupes" ou collections d'images.

Les images doivent impérativement avoir un attribut "alt" qui sera éventuellement vide s'il s'agit par exemple des images de touches clavier.

L'attribut "title" permet l'affichage d'un texte explicatif que l'on voit au survol de la souris.

Le bloc "aside"


Nous avons laissé de côté le bloc "aside". Nous le gardons pour divers renseignements qui seront mis à jour au cours des visites des lecteurs. Pour cela, il faut étudier maintenant un peu plus de pratique de "php" et de la base de données "sql". C'est ce que nous allons faire dans les chapitres suivants.

Gaby Rambault Cours 2018 - Page


similaire:

Solution : Alléger les pages au maximum iconVotre cv insérez un cv (maximum 2 pages) Financement

Solution : Alléger les pages au maximum iconLa bombe Bolkestein sur la poudrière constitution Européenne Par...
«exposé des motifs» (pages 2-27), une série de 73 «considérants» (pages 29-46), les 47 articles de la directive proprement dite (pages...

Solution : Alléger les pages au maximum iconLa solution de «destop ®» peut réagir avec une solution d’acide chlorhydrique H
«destop ®» (produit pour déboucher les canalisations) est une solution fortement basique. Pour simplifier les raisonnements nous...

Solution : Alléger les pages au maximum iconNote: L’utilisation du générique masculin dans ce document vise uniquement...

Solution : Alléger les pages au maximum iconI solution commerciale S
«équivalence» ? A partir des courbes tracées données en annexe, déterminer le volume équivalent ve en expliquant et en déduire la...

Solution : Alléger les pages au maximum iconNombre de pages : 9 + 2 pages de schémas

Solution : Alléger les pages au maximum iconQue faut-il extraire de la solution verte pour retrouver la solution d’Alodont ?

Solution : Alléger les pages au maximum iconLa solution de médicament étant trop concentrée, on prépare par dilution une solution

Solution : Alléger les pages au maximum iconSolution aqueuse pH, sécurité chimique
«solution à neutraliser» contenant de l’acide chlorhydrique ou de l’hydroxyde de sodium à 10-2 mol/L

Solution : Alléger les pages au maximum iconTous les numéros de pages renvoient à l’édition du programme, Fin...
«Les Pensées de Pascal chez les Fratellini», selon l’expression d’Anouilh restée célèbre





Tous droits réservés. Copyright © 2016
contacts
m.20-bal.com