mercredi 9 mai 2007

Blog tips: [Part 2] - Composition

Comme le fait tres justement remarquer Pascal, la syntaxe des tableaux est "has been" et vous pouvez utiliser une approche "liquid CSS", plus flexible (en fonction des cas, l'un sera plus facile a mettre en place que l'autre). Enfin, ce poste est destine aux debutants (a la demande de Thien Lan) et n'a pas la pretention d'amener quoique ce soit de revolutionnaire... juste quelques formules vous permettant d'avoir la bonne taille d'image selon votre composition. Les tableaux permettent d'avoir une meilleur comprehension du code.

[vertical][horizontal]
[vertical][horizontal]

ou
[horizontal][vertical]
[horizontal][vertical]
><table width="100%" align="center">
___<tbody>
______<tr>
_________<td width="50%" rowspan="2">212</td>
_________<td width="50%">178</td>
______</tr>
______<tr>
_________<td width="50%">178</td>
______</tr>
___</tbody>
</table>
><table width="100%" align="center">
___<tbody>
______<tr>
_________<td width="50%">178</td>
_________<td width="50%" rowspan="2">212</td>
______</tr>
______<tr>
_________<td width="50%">178</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
2xH1 + 2xM + P = H2
H2 = R x L2
L1 = R x H1

On resoud et on obtient
L1 = {RxS - (4xR + 2) x M - (3xR + 1) x P} x R / (2 + R²)
L2 = S - 4xM -3xP - L1


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

[horizontal][vertical]
[vertical][horizontal]

ou
[vertical][horizontal]
[horizontal][vertical]
><table width="100%" cellpadding="0" cellspacing="0">
___<tbody>
______<tr>
_________<td width="50%">
____________<table align="center">
_______________<tbody>
__________________<tr>
_____________________<td>195</td>
__________________</tr>
__________________<tr>
_____________________<td>195</td>
__________________</tr>
_______________</tbody>
____________</table>
_________</td>
_________<td width="50%">
____________<table align="center">
_______________<tbody>
__________________<tr>
_____________________<td>195</td>
__________________</tr>
__________________<tr>
_____________________<td>195</td>
__________________</tr>
_______________</tbody>
____________</table>
_________</td>
______</tr>
___</tbody>
</table>
>
  • L la largeur des images
  • S la largeur de la surface d'affichage
  • M la marge de l'image
  • P la marge interieure du tableau
Formule:
L + 4xM + 3xP = S

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

Ben voila... Il vous reste plus qu'a mixer tout ca pour varier un peu votre presentation!
Next: Model XML est transformation XSLT pour automatisation complete de la publication.

[...a suivre]

2 commentaires:

Olivier de Montréal a dit…

Très intéressant, tout ça!! Je vais essayer! :-)

Merci!

Yves a dit…

Vive le PHP : faites le vous-même !!! ;-P