Html5¶
but¶
Le but est de pouvoir adapter GLPI à différent types d'appareil (ordinateur, tablette, smartphones).
Les plugins serait également optimisés pour cet affichage
modification de code¶
- Ajout des balises spécifiques HTML5 afin de gérer le menu et les sections
- Modification / ajout de classes CSS
- Gestion de l'affichage des formulaires via des fonctions dédiées (au lieu de faire < td ..> < /td >, passer par une fonction)
- Il serai intéressant pour gagner en visibilité sur les smartphones, de na pas afficher les input, dropdown lorsque l'utilisateur n'a que les droits de lecture. On aficherait donc que le texte
ordinateur¶
On ne touche pas au design pour garder le même aspect que la version actuelle
smartphone¶
optimisation de l'afichage des smartphones
affichage des blocs¶
Menu¶
Listes d'éléments¶
Formulaires¶
Plugin Mobile : (Orthagh)¶
Je me permet de prendre part à cette discussion ayant déjà pas mal travaillé sur le sujet.
Tout d'abord ce lien vers un plugin mobile refait pour la 0.84 (credentials : admin/admin) qui permettra d'illustrer mes propos (cette version n'est pas entièrement finie et certaines fonctionnalités peuvent être fortement dégradées).
Donc :
- Libs à jour
- Récupération et transformation du html de GLPI plutot que réécriture de parties plus ou moins conséquente (problème du moteur de recherche par ex) via une lib de DOM (phpquery).
- Comblement des manques (multis-entités et profiles, marques-pages, vue centrale)
A cela, s'ajoute une réflexion autour de l'affichage dans diverses résolutions d'écrans mais évidemment adapté aux terminaux mobile (tablette de différentes tailles, smartphone).
Je n'ai pas encore poussé la réflexion à une seule interface pour tout types (ordinateur classique + mobiles).
David : Justement, il faut modifier une grosse partie du code pour gérer ça (par exemple le tableau d'un formulaire pour afficher les 4 colonnes sur un navigateur normal et basculer en 2 colonnes en affichage tablette/smartphone.
Alexandre : (De mon point de vue) il ne faudrait plus utiliser des tableaux pour mettre en forme des formulaires qui sont justement assez pénible à modifier juste avec du css (pas impossible cela dit, voir le mode reflow plus loin). Il serait préférable d'utiliser des listes (http://jsbin.com/igayer/2/edit), des labels et des inputs avec de la mise en forme en flottant.
Les tableaux html devraient être utilisés pour afficher des tableaux de données tout simplement (typiquement les listes du moteur de recherche où cela est pertinent).
Ce qui permettrait d'arriver à du responsive très rapidement (ex ici : http://www.dynamicdrive.com/cssexamples/responsive2colform_eg.htm)
HTML5 apporte d'ailleurs un nombre conséquent d'ajouts au formulaires, j'ajouterais un paragraphe plus tard sur ce sujet.
David : je l'entendais comme ça, mettre en flottant, utiliser les balises HTML5 (genre la balise menu pour le menu...)
Donc il y a un gros taf d'identification des modifications de code à faire.
Alexandre : complètement d'accord
La techno principale pour implémenter cette idée est le responsive design et plus particulièrement les media queries
Jquery mobile implémente ces technos de base.
David : Pourquoi utiliser du Jquery alors qu'il existe des balises normées HTML5 + le CSS ? Ca rajoute une surcouche et je ne suis pas sûr que ça soit une bonne solution face à du vrai HTML5 Natif
Alexandre: je ne serais pas exhaustif sur ce point, mais c'est évidemment du confort. Je n'impose pas ce framework, je présente celui que j'utilise dans le plugin.
Les avantages étant surtout d'avoir des composants réutilisables. Je n'ai pas d'avis tranché par rapport à ce point, mais une refonte spécifique (sans passer par un framework) de design de glpi à base de div + du responsive serait de toute façon très bien.
Dans l'exemple du plugin mobile, cela est rendu de deux façon différente :
- Mode Column toggle : dans le "table" du moteur de recherche, seules les colonnes le pouvant s'affichent réellement, les autres sont invisibles mais ré-activable via un menu "colonnes" en haut à droite. On peux avec ce mode indiquer une priorité aux colonnes (j'ai par exemple mis une priorité haute sur l'id et le tri)
- Mode Reflow : Visible sur les vues centrales, si la largeur d'écran ne permet pas d'afficher toutes les colonnes, celles-ci sont transformées en lignes.
Vous pouvez essayer avec votre navigateur desktop simplement en réduisant la largeur de la fenêtre.
En css, cela se code ainsi :
Column toggle
/* Réglage par défaut */
#mobileTable th,
#mobileTable td {
display: none;
}
/***** Responsive Table td/th priority ******/
/* Show priority 1 at 320px (20em x 16px) */
@media screen and (min-width: 10em) {
#mobileTable th.ui-table-priority-1,
#mobileTable td.ui-table-priority-1 {
display: table-cell;
}
}
/* Show priority 2 at 560px (35em x 16px) */
@media screen and (min-width: 35em) {
#mobileTable th.ui-table-priority-2,
#mobileTable td.ui-table-priority-2 {
display: table-cell;
}
}
/* Show priority 3 at 800px (50em x 16px) */
@media screen and (min-width: 50em) {
#mobileTable th.ui-table-priority-3,
#mobileTable td.ui-table-priority-3 {
display: table-cell;
}
}
...
Reflow
// display table as block
.mobileTable td,
.mobileTable th,
.mobileTable tbody th,
.mobileTable tbody td,
.mobileTable thead td,
.mobileTable thead th {
display: block;
margin: 0;
}
//show classic table at 640px (40em * 16px)
@media ( min-width: 40em ) {
/* Show the table header rows and set all cells to display: table-cell */
.mobileTable td,
.mobileTable th,
.mobileTable tbody th,
.mobileTable tbody td,
.mobileTable thead td,
.mobileTable thead th {
display: table-cell;
margin: 0;
}
/* Hide the labels in each cell */
.mobileTable td .ui-table-cell-label,
.mobileTable th .ui-table-cell-label {
display: none;
}
}
...
Pour aller plus loin :
- Jquery Mobile
- Bootstrap implémente menu "responsive"