mercredi 9 mai 2007

Blog tips: [Part 1] - Composition

Lorsqu'on utilise blogger, en standard, il n'est pas facilement possible de faire des compositions de photos. On ne peut que positionner une photo par ligne en choisissant parmi 3 tailles differentes et 4 types d'alignement.
Ci dessous vous trouverez la description de plusieurs types de composition permettant une mise en page un peu plus elaboree.
Le plus difficile etant en fait de trouver la bonne largeur d'image (attribut width="largeur"). J'ai joint une formule permettant de la calculer en fonction de vos parametres.

Je recommande egalement que vous enregistriez vos images sous 2 formats differents, le format final (si vous decidez qu'il est possible d'agrandir la photo en cliquant dessus) et le format vignette et que vous uplodiez le tout sur un serveur FTP (Free en propose un gratuitement par exemple. Vous pouvez utiliser Filezilla pour uploader les photos). Ou bien utilisez Flickr ou Picasa pour gerer vos images. Il vaut mieux eviter d'avoir une seule image: en effet redimensionner avec l'attribut width une image de grande dimension vous donnera un resultat assez affreux et en plus vous augmenterez le volume a charger sur la page principale pour rien!

Pour vous rafraichir la memoire sur le HTML ou XHTML et CSS, allez faire un tour sur le w3schools.

[horizontal][horizontal][horizontal]
ou
[vertical][vertical][vertical]
><table width="100%" align="center">
___<tbody>
______<tr>
_________<td width="33%">125</td>
_________<td width="34%">125</td>
_________<td width="33%">125</td>
______</tr>
___</tbody>
</table>
>Variable:
  • L la largeur de l'image
  • S la largeur de la surface d'affichage
  • M la marge de l'image
  • P la marge interieure du tableau
Formule:
3xL + 3x2xM + 4xP = S

Dans mon cas M=5, P=5, S=425
--> L=125
Blog Australie - 2 Frogs en OzBlog Australie - 2 Frogs en OzBlog Australie - 2 Frogs en Oz

[horizontal][vertical]
ou
[vertical][horizontal]
><table width="100%" align="center">
___<tbody>
______<tr>
_________<td>250</td>
_________<td>141</td>
______</tr>
___</tbody>
</table>
>Variable:
  • L1 la largeur de l'image horizontale
  • H1 la hauteur de l'image horizontale
  • L2 la largeur de l'image verticale
  • H2 la hauteur de l'image verticale
  • S la largeur de la surface d'affichage
  • M la marge de l'image
  • P la marge interieure du tableau
  • R le rapport d'image
Formule:
L1 + L2 + 2x2xM + 3xP = S
H1 = H2
H2 = R x L2
L1 = R x H1

On resoud et on obtient
L2 = {S - (2x2xM + 3xP)} x (R² + 1)
L1 = R² x L2


Dans mon cas M=5, P=5, S=425, R=4/3
--> L1=250
--> L2=141
Blog Australie - 2 Frogs en OzBlog Australie - 2 Frogs en Oz

[horizontal][horizontal]
[--horizontal--]

ou
[vertical][vertical]
[--vertical--]

ou
[vertical][vertical]
[--horizontal--]

ou
[horizontal][horizontal]
[--vertical--]
><table width="100%" align="center">
___<tbody>
______<tr>
_________<td width="50%">195</td>
_________<td width="50%">195</td>
______</tr>
______<tr>
_________<td colspan="2" width="100%">405</td>
______</tr>
___</tbody>
</table>
>Variable:
  • l la largeur de la petite image
  • L la largeur de la grande image
  • S la largeur de la surface d'affichage
  • M la marge de l'image
  • P la marge interieure du tableau
Formule:
2xl + 2x2xM + 3xP = S
L + 2xM + 2xP = S


Dans mon cas M=5, P=5, S=425
--> l=195
--> L=405
Blog Australie - 2 Frogs en OzBlog Australie - 2 Frogs en Oz
Blog Australie - 2 Frogs en Oz

Si vous etes sages, apres ces bouts de code, on passera a un modele XML permettant de tout automatiser!

[...a suivre]

5 commentaires:

sukarabi a dit…

Whaou, là tu vas me faire gagner pas mal de temps. Je viens tout juste de recommencer péniblement à poster pour cause de gros méchant déménagement que je suis en train d'essayer de me dépatouiller avec loc.alize.us.
Merci

Anonyme a dit…

Mouais...c'est pas un peu 'has been' la balise 'table'? Pourquoi ne pas essayer en css?

Young a dit…

Hey oui c'est has been, mais je prefere les tableaux aux div et autre span, c'est en tout cas adapte a mon template. Mais bon, c'est principalement pour les mesures des images ce post... pas tellement pour les tableaux.

Et a part me traiter d'has been, ca va le demenagement?

Anonyme a dit…

Hehe, je prends des notes! C'est que c'est instructif ici :)

Thien Lan a dit…

wow...too hard
Je vais attendre qu'ils ameliorent leurs fonctionalites chez blogger... ou que je sois au chomage pour avoir le temps de faire de jolis tableaux...

Mais ton conseil n'est pas tombe dans l'oreille d'un sourd (enfin sous les yeux d'aveugles) et je vois que d'autres sont bien plus c courageux que moi, merci pourle tuyau!