Design par cadre de div ou TD

[starmindfr]

Bonjour

Quelques questions sur le design en général, notamment pour arriver a organiser le contenu du site dans plusieurs cadres (donc bordures des DIV / Tables...) avec de belles textures / images :

- Pour ou contre les cadres fixes sous forme d'une image en fond ?
- Est ce mieux de partir de 2 dessins de bordures, plutôt que de faire des complètes avec le dessin de fin des extrémités?
- Ajouter des coins sous forme d'image ? (facile / difficile / déconseillé ?)
- Dessiner une bordure entière (tout l’écran) ou répéter un morceau ?

[Xenos]

- Pour ou contre les cadres fixes sous forme d'une image en fond ?

Contre, car l'image sera à 99% composée de transparence, et même pixellisée à mort.

- Est ce mieux de partir de 2 dessins de bords, un vertical et 1 horizontal ?

Pour, cela me sembleêtre la meilleure solution, en utilisant les couches multiples des backgrounds en CSS. Cela évite des images trop "pleines" de transparences (donc lourdes pour rien), et cela permet donc de faire des images avec une assez grande finesse.

- Ajouter des coins sous forme d'image ?

Par-dessus les couches précédentes? pourquoi pas, mais cela devient délicat... Au sens où, si tu changes la couleur du cadre, cela fera 8 fichiers à changer. Le jeu n'en vaut la chandelle que si les bords du cadre sont une image répétée, et non si le bord est une image dont la hauteur ou largeur doit faire 100% du fond.

- Dessiner une bordure compléter ou répéter un morceau ?

Comme dit ci-dessus, étirer ("compléter?") une image la pixelisera et la déformera. Répéter sera bien mieux, d'autant que tu ne connais pas la taille de la bordure sur l'écran de l'utilisateur (si tu fixes tes dimensions en pixels, je pense que c'est une erreur, car un terminal peut avoir une très forte résolution, mais être tout petit comme un smartphone, ou avoir une faible résolution et être énorme genre vidéoprojecteur; se baser sur les mm me semble plus approprié; d'autant que les jeux vidéos fonctionnent sur ce principe: quelque soit la résolution de l'écran, la même chose est affichée, tout ce qui change, c'est seulement la qualité, aka la finesse, de l'image).

[starmindfr]

Bonjour merci pour les réponses, notamment l'idée des millimètres à la place des px je vais tenter cela, travaillant pour un affichage multi plateformes justement!

[Harparine]

Salut, il faut effectivement plusieurs images (pour les coins aussi).
Tu peux le faire à l'ancienne, avec des div imbriquées transparentes contenant chacune des images répétées en background. Ca passe partout mais c'est lourd et ça n'a aucun sens dans ton code HTML. Exemple :

Code :

<div class="generalDocument">
        <div class="generalDocument_head">
            <div class="generalDocument_head_left">
                <div class="generalDocument_head_right">
                </div>
            </div>
        </div>
        <div class="generalDocument_body">
            <div class="generalDocument_body_right">
                <div class="generalDocument_content">
                </div>
            </div>
            <div class="generalDocument_foot">
                <div  class="generalDocument_foot_left">
                    <div class="generalDocument_foot_right">&nbsp;</div>
                </div>
            </div>
        </div>
    </div>

Et le CSS qui va avec (c'est vieux, c'est crade mais l'idée y est) :

.generalDocument {

    padding: 0px;

    margin-top: 15px;

    margin-right: 230px;

    margin-left: 0px;

}



.generalDocument_content {

    margin-top: -50px;

}



.generalDocument_body {

    background: #f5f6f6 url("../img/design/infos_general_body_left.png") repeat-y;

    padding: 0px;

}



.generalDocument_body_right {

    background: transparent url("../img/design/infos_general_body_right.png") repeat-y  top right;

    padding: 1px 30px;

    padding-left: 50px;

}



.generalDocument_head {

    background: url("../img/design/infos_general_head_back.png") repeat-x;

    padding: 0px;

}



.generalDocument_head_left{

    background: url("../img/design/infos_general_head_left.png") no-repeat;

    padding: 0px;

}



.generalDocument_head_right{

    height: 70px;

    background: transparent url("../img/design/infos_general_head_right.png") no-repeat top right;

    padding: 0px 50px;

    padding-top: 10px;

}



.generalDocument_foot {

    background-image: url("../img/design/infos_general_foot_back.png");

    background-repeat: repeat-x;

    padding: 0px;

}



.generalDocument_foot_left {

    background-image: url("../img/design/infos_general_foot_left.png");

    background-repeat: no-repeat;

    padding: 0px;

}



.generalDocument_foot_right {

    height: 70px;

    background-image: url("../img/design/infos_general_foot_right.png");

    background-repeat: no-repeat;

    background-position: right bottom;

    padding: 0px 30px;

}

Sinon, il y a (beaucoup) plus élégant en CSS3 :

Code :

<div class="general-document">
Contenu
</div>

.general-document {

	background-color: #f5f6f6;

	background: 

		url("../img/design/infos_general_head_right.png") no-repeat top right,

		url("../img/design/infos_general_head_left.png") no-repeat top left,

		url("../img/design/infos_general_foot_right.png") no-repeat bottom right,	

		url("../img/design/infos_general_foot_left.png") no-repeat bottom left,

		url("../img/design/infos_general_body_right.png") repeat-y top right,

		url("../img/design/infos_general_body_left.png") repeat-y top left,

		url("../img/design/infos_general_head_back.png") repeat-x top left,

		url("../img/design/infos_general_foot_back.png") repeat-x bottom left,

		#f5f6f6;

	border: none;

	padding: 40px;

	margin: 0px;

	webkit-box-shadow: none;

		-moz-box-shadow: none;

			box-shadow: none;

	-webkit-border-radius: 0px;

		-moz-border-radius: 0px;

			border-radius: 0px; 

}

[Klhz]

Salut,

ta question peux te paraître précise et complète mais je ne suis pas certain de bien comprendre.
Par contre je suis sûr que beaucoup peuvent t'aider!

En vrac:
-Choisir entre les div et le td, je te conseille le div car cela te laissera + de liberté par exemple pour du responsive design. Tu sera libre de tout faire si tu t'intéresse aux z-index. La technique des tableaux imbriqués et des images découpées ne t'apporte pas plus que ça aujourd'hui je pense.
-Des coins sous forme d'image ça pose pas de problèmes, il faut juste optimiser le poids de l'image?
-Pour ta bordure si c'est un contenu fixe tu peux faire une bordure complete (optimise le poids) . si c'est un contenu extensible fait une bordure qui se répète

[Xenos]

Oublie totalement les div imbriquées: le non-sens sémantique qui en résulte est calamiteux. De plus, le jour où tu voudras changer de cadre (donc de présentation), t'es quitte pour refaire toute la page web.
Reste sur du CSS3. Si ta page est bien faite, les navigateurs qui ne le supportent pas ne s'en porteront pas plus mal, car, si ta page est bien faite le sens est dans le HTMl (qui sera supporté), seule la présentation sera moins bonne. Pense aussi à ceux qui ont des lecteurs d'écran ou autres brailles assimilés: inutile de les encombrer avec des éléments html utiles uniquement pour la présentation.

Le choix entre div et td n'est pas à fixer par rapport au responsive design, au z-index ou autre. On utilise "div" si le contenu de l'élément est à séparer clairement du reste de la page (par exemple, la "div" peut contenir un cadre avec des données sur un bâtiment, une unité ou une case). On utilise td (donc table/tr/td) si on a des données à classer sous forme d'un tableau.
CSS te permettra toujours de présenter ta div comme ton td, et inversement. Il suffira juste d'appliquer les bonnes règles. Le balisage HTML se fonde sur la sémantique (le sens) et non sur la forme (qui est du ressort du CSS).

Donc
t(able)d(ata) = case d'une donnée en tableau, c'est à dire d'une donnée qui ne fait pas forcément sens seule, mais qui fait sens si elle est jointe aux autres données du tableau
div(ision)=section autonome ou quasi-autonome, indépendante du reste de la page web.
Un bon moyen de distinguer les deux, selon moi, est le suivant: n'afficher que l'élément (div ou td); si on peut comprendre le sens de ce qu'il contient, c'est une div; sinon, c'est un td.
Autre façon, plus "programeur" de le voir: si je peux attribuer un index numéraire en 2 dimensions à mon élément, alors c'est un td (tableau). Si je peux lui attribuer un index en 1 dimension, c'est une liste. Si je ne peux pas l'indexer, alors c'est une div.
Ex:
Les jours de la semaine s'indexe en 1 dimension: c'est une liste
Les heures dans une journée s'indexe en 1 dimension: c'est aussi une liste.
Les heures de la semaine s'indexent en 2 dimensions (jouer+heure): c'est un tableau (emploi du temps)
Mon planning de la semaine (si ce planning ne change jamais d'une semaine à l'autre) n'est pas indexable (ou alors, il est seul dans cet index, l'index ne contient que cet élément, et l'index est donc de "dimension" 0), alors c'est une div.


Les coins sous forme d'image sont du même ressort. L'image du coin n'apporte rien en terme de sens et "d'information" pour la page: cela n'apporte que de la fioriture jolie. Imagine quelqu'un qui a une connexion spéciale, pour laquelle il paye chaque octet. Il préfèrera utiliser une page web la plus légère possible. Si l'image est dans la page web (balise img), cette personne considèrera que l'image fait sens, qu'elle est importante (c'est donc le cas si l'image en question illustre ton article de blog par exemple). En revanche, les jolis cadres et les couleurs, cette personne s'en fiche, car elle paye sa connexion trop chère pour se permettre d'afficher ce genre d'éléments non-informatif: c'est donc une image à mettre dans le CSS.
Les humains ne procèdent pas ainsi (je ne connais personne qui paye sa connexion "à l'octet"), mais les machines, et typiquement les crawlers des moteurs de recherche, procèdent certainement comme cela.
Donc, l'image du cadre n'apportant pas de sens, elle n'a rien à faire en tant que balise HTML. Non seulement ce sera plus respectueux des standards, mais en plus cela améliorera le référencement du site sur le(s) moteur(s) de recherche, et enfin, cela allègera ton travail de maintenance en séparant sens (mécanique de la page web, donc potentiellement mécanique de jeu) de la présentation (affichage qui pourrait être sous-traité à un designer ou à tes joueurs sous forme de concours).

Pour le dernier point, c'est du ressort du jugement personnel. Je ne pense pas qu'un cadre de taille fixe soit idéal, car la quantité de pixels transparents sera impressionnante. De plus, si tu changes la taille du cadre, cela le pixellisera d'avantage (tu risques donc de te complexifier la maintenance). Enfin, si tu utilises des mm, tu ne sais pas quelle sera la résolution (au sens finesse) de l'image affichée: si la résolution de l'écran est élevée, alors ton image sera baveuse et pas belle. OU alors, il lui faudra une taille énorme, et donc, encore plus de pixels transparents.
Un petit calcul pour l'illustration?
L'espace à encadrer fait 10cm*10cm (100mm*100mm), soit environ 400px*400px. Ta bordure fait 1mm d'épaisseur (4px). Le cadre contient donc 400*400=160000 pixels transparents, et seulement 4*1*100=400 pixels de bordure... Seulement 1/400e (0.25%) de l'image créée est utile. Même avec la compression des lignes de l'image, ca ne sera pas joli niveau poids.

[starmindfr]

Merci bien c'est pas mal comme raisonnements

Et donc si le système part d'un échantillon de bordure a répliquer, la couverture ce fait bien automatiquement coté client je suppose, et avec un délais de traitement bien plus faible que celui du chargement d'une image complète plus grande ?

@Harparine intéressant l'exemple CSS3, comment ce fait l'ajustement entre les angles et le reste des bordures, le CSS3 se débrouille bien tout seul sans avoir à spécifier des tailles derrière ? Si c'est le cas je suppose que cela permet de faire l'appliquer massivement sur toutes les fenêtres de tailles différentes.

[Xenos]

Si la taille est non-spécifiée, en mode "no-repeat", l'image du background est affichée "telle quelle", c'est à dire que 1pixel de l'image du background = 1 pixel sur l'écran d'affichage. Il est possible de définir une dimensions pour ce background, en mm par exemple. En ce cas, le background est affiché à la position indiquée (top left), avec la taille sécifiée (5mm 5mm). Si la résolution du client est bonne, l'image sera fine, si elle est mauvaise, l'image sera baveuse.
Je ne sais pas si on peut utiliser un SVG comme background-image.

Si tu comptes utiliser une bordure qui se répète, il suffit d'utiliser la valeur background-repeat associée à la couche du background que tu définis. En ce cas, le client fait les répétitions tout seul comme un grand. Si la fenêtre est redimensionnée, le client refait le calcul de répétition.

[starmindfr]

oui j'ai aussi essayer aussi les gradients pour obtenir le même effet visuel que les scrollbar - fluos / gloss mais l'utilisation d'une vraie texture personnalisée semble visuellement plus attractive, a condition que le motif se prête bien au repeat voir a la réduction.

[Harparine]

@Harparine intéressant l'exemple CSS3, comment ce fait l'ajustement entre les angles et le reste des bordures, le CSS3 se débrouille bien tout seul sans avoir à spécifier des tailles derrière ? Si c'est le cas je suppose que cela permet de faire l'appliquer massivement sur toutes les fenêtres de tailles différentes.

Effectivement, CSS3 fait ça très bien tout seul. Après, j'ai toujours utilisé des images dont les tailles correspondaient : exemple, le coin en bas à droite fait la même hauteur que l'image de bas et la même largeur que l'image de côté droit.

@Xenos : Il ne faut évidemment pas utiliser la technique des div imbriquées mais ce genre de bidouilles étaient nécessaires il y a quelques années pour avoir un cadre joli. La mode du design minimaliste n'est que très récente (je refais justement mon site dans cette optique).
@+