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).

L'idée dans cette nouvelle version était de repartir de zéro, la version initiale du plugin étant plus ou moins mon premier contact avec GLPI.
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.

Cela permet en css, d'adapter le rendu d'un tableau, d'une div, en fonction de la taille de l'écran.
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 :

glpi_html5_blocs.png (267 KB) ddurieux, 07/18/2013 12:25 PM

glpi_html5_form.png (188 KB) ddurieux, 07/18/2013 12:25 PM

glpi_html5_listes.png (428 KB) ddurieux, 07/18/2013 12:26 PM

glpi_html5_menu.png (603 KB) ddurieux, 07/18/2013 12:26 PM