Bonjour,
Sur un autre topic, en marge de la critique de mon site, Parsimonhi m'a posé un petit défi à relever. Celui-ci est très intéressant, mais comme il était en marge du topic je le poste ici pour qu'il soit un sujet à part entière :
Donc ma solution (elle n'est pas parfaite et peut encore être améliorée) : CodePen, Organizational Chart.
Avantages :
- full css (comme exigé dans le problème)
- elle part d'un ensemble de listes (non imbriquées, c'était plus simple à intégrer, et aussi plus clair pour l'utilisateur je pense)
- le graph est donc sémantique
- et donc aussi : pas de soupe de div (c'était mon objectif perso)
- très facile d'utilisation, on entoure toutes les listes avec une classe et hop : on a le graphique
- elle respecte la demande des items de largeur indéfinies (et on met ce que l'on veut dedans)
- tous les items doivent être présents, mais s'ils ne sont pas renseignés ils n'apparaitrons pas sans pour autant désorganiser le graphique
Inconvénients (tous liés à la difficulté de maîtrise des barres horizontales obtenues de par les pseudo-éléments) :
- elle n'est responsive que jusqu'à un certain point (au-delà on pourrait passer en liste simple ?)
- la grille fonctionne que pour un graph "quart de finale" pour l'instant alors que sur le principe elle pourrait aller beaucoup plus loin (toujours à cause des barres horizontales qui seraient pourtant faciles à contrôler avec des div en plus)
- de même le graph est sensible au contexte (disposera-t-il ou non d'une largeur 100% ?)
Voilà pour l'instant en l'état actuel de ma réflexion...
Modifié par Olivier C (28 Feb 2016 - 08:24)
Sur un autre topic, en marge de la critique de mon site, Parsimonhi m'a posé un petit défi à relever. Celui-ci est très intéressant, mais comme il était en marge du topic je le poste ici pour qu'il soit un sujet à part entière :
parsimonhi a écrit :
Voici donc un problème général (qui peut avoir un intérêt pour pas mal de gens) : l'affichage de résultats d'une compétition à élimination directe.
En voici un exemple : http://jeudego.org/_php/affiche_asian_TV_Cup.php
Il y a aussi ce genre de "tableaux" de résultats sur les sites sportifs bien évidemment (en particulier ceux qui traitent du tennis). Mais la qualité est très aléatoire, d'où un intérêt supplémentaire à bien traiter ce problème.
Cela peut aussi servir en généalogie.
Pour en revenir au lien que j'ai donné, dans chaque case, on a le nom des joueurs et un numéro, mais tu peux oublier ce qu'il y a dans les cases (on pourrait y ajouter un drapeau de pays, une photo, etc.). La taille de chaque "case" est inconnue à priori. Il suffit que la solution fonctionne avec des "cases" contenant ce que tu veux. Par contre, il faut faire apparaitre une ligne qui relie certaines "cases", matérialisant un arbre. Cerise sur le gâteau, l'utilisation de canvas pour tracer l'arbre n'est pas souhaitée.
Il peut y avoir des blancs (c'est à dire que l'arbre n'est pas complet, des joueurs sont exemptés, en particulier au début de la compétition).
Dans la solution, il faudrait prévoir un bandeau pour le haut (le menu de gauche et le bas de page, on peut les oublier). Ce n'est pas le plus dur.
Pour le html, tu peux partir soit sur celui du lien que j'ai donné en exemple (tu ne gardes que le contenu bien entendu, des <div> donc) soit sur l'idée d'une liste avec des ul et des li, éventuellement sur plusieurs niveaux d'imbrication (si ça peut t'arranger).
Et il faut bien évidemment que ce soit lisible sur un téléphone !
Est-ce que ça te va, comme exemple ?
Donc ma solution (elle n'est pas parfaite et peut encore être améliorée) : CodePen, Organizational Chart.
Avantages :
- full css (comme exigé dans le problème)
- elle part d'un ensemble de listes (non imbriquées, c'était plus simple à intégrer, et aussi plus clair pour l'utilisateur je pense)
- le graph est donc sémantique
- et donc aussi : pas de soupe de div (c'était mon objectif perso)
- très facile d'utilisation, on entoure toutes les listes avec une classe et hop : on a le graphique
- elle respecte la demande des items de largeur indéfinies (et on met ce que l'on veut dedans)
- tous les items doivent être présents, mais s'ils ne sont pas renseignés ils n'apparaitrons pas sans pour autant désorganiser le graphique
Inconvénients (tous liés à la difficulté de maîtrise des barres horizontales obtenues de par les pseudo-éléments) :
- elle n'est responsive que jusqu'à un certain point (au-delà on pourrait passer en liste simple ?)
- la grille fonctionne que pour un graph "quart de finale" pour l'instant alors que sur le principe elle pourrait aller beaucoup plus loin (toujours à cause des barres horizontales qui seraient pourtant faciles à contrôler avec des div en plus)
- de même le graph est sensible au contexte (disposera-t-il ou non d'une largeur 100% ?)
Voilà pour l'instant en l'état actuel de ma réflexion...
Modifié par Olivier C (28 Feb 2016 - 08:24)
