Developpez.com - Rubrique JavaScript

Le Club des Développeurs et IT Pro

Créer un tableau de bord interactif avec la même interface que Windows 8

Article de Paul Underwood traduit par FirePrawn

Le 2013-03-15 09:16:18, par FirePrawn, Expert éminent sénior


Je vous propose une traduction de l'article anglophone Create An Interactive Metro Style Grid Dashboard par Paul Underwood : Créer un tableau de bord interactif avec la même interface que Windows 8.

N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

Créer un tableau de bord interactif avec la même interface que Windows 8.

  Discussion forum
10 commentaires
  • ulspider
    Membre éprouvé
    J'aime beaucoup.

    Il manque plus qu'à rendre les tuiles vivantes (contenu dynamique) et ça sera au top !
  • Golgotha
    Membre expert
    Dans cet article nous avons comment créer un design
    Manque un mot

    Sinon, bon travail
  • la.lune
    Membre chevronné
    Envoyé par ulspider
    J'aime beaucoup.

    Il manque plus qu'à rendre les tuiles vivantes (contenu dynamique) et ça sera au top !
    Mais c'est à toi de faire ça après, c'est faisable, bon vu que c'est du web, dans chaque tuiles tu peux ajouter de l'Ajax avec JQuery( des requêtes par exemple dans chaque seconde) ou qu'il reçoit des donnés en temps réel via des websocket, que ça soit en php, node.js ou java.
  • Samuel_
    Membre expert
    Excellente idée !

    J'ai plein d'idée sur ce thème à mettre en place ! =)
    Je test ça bientot !

    Merci !
  • FirePrawn
    Expert éminent sénior
    Merci Golgotha coquille corrigée
  • ulspider
    Membre éprouvé
    Envoyé par la.lune
    Mais c'est à toi de faire ça après, c'est faisable, bon vu que c'est du web, dans chaque tuiles tu peux ajouter de l'Ajax avec JQuery( des requêtes par exemple dans chaque seconde) ou qu'il reçoit des donnés en temps réel via des websocket, que ça soit en php, node.js ou java.
    Salut,

    ce n'était pas une critique, c'était juste une idée pour enrichir le tableau de bord et le rendre à mes yeux parfait. Le boulot de FirePrawn est déjà énorme et cela me donne pleins d'idées pour l'enrichir

    Je trouve le système de tuile vraiment pratique pour diffuser de l'information. Je vais tacher de faire cela sur un de mes sites en ajoutant la possibilité de sauvegarder la position des tuiles coté serveur (dans la session utilisateur), le redimensionnement des tuiles, le contenu dynamique de la tuile...
  • stailer
    Membre chevronné
    Salut,

    J'ai découvert Gridster il y a pas mal de temps et c'est justement ce que je voulais faire !

    Je te félicite donc pour ton intégration graphique car évidemment pour le dév : le composant est déjà fait et le dynamisme c'est à nous de le rajouter.

    Enfin, juste une petite note : en triturant gridster ou ton intégration, tu pourras t'apercevoir que parfois tu peux placer des tuiles à des endroits ou Windows 8 ne peut pas (genre avec aucune tuile au dessus).
    Puis en bougeant de nouveau ces mêmes tuiles elles vont alors reprendre leur place "logique". Bref, en clair : il y a des petits bugs.

    Bravo quand même pour cette intégration.
  • FirePrawn
    Expert éminent sénior
    Bon alors je tiens à préciser quelque chose que beaucoup n'ont visiblement pas saisi : je ne suis que le traducteur de l'article

    Le code, l'intégration, le contenu de l'article ne sont pas de moi mais de Paul Underwood
    Donc si vous rencontrez des bugs au niveau de la page d'exemple il faut les remonter à l'auteur (Paul Underwood) directement, moi je n'ai fait que copier son exemple
  • SylvainPV
    Rédacteur/Modérateur
    Les layouts en grille façon Metro, on aime ou on aime pas... C'est vrai que ça simplifie les choses côté web responsive, mais bon c'est pas approprié pour présenter tous les contenus.

    Personnellement j'utilise Isotope (http://isotope.metafizzy.co/) pour faire ce genre de vues. Je n'ai pas comparé en détail mais je crois que Gridster a un avantage côté interaction drag and drop et que Isotope gagne en modes d'affichage et options.

    Enfin il ne faut pas sombrer dans la facilité et le hype, et rester ouvert aux autres solutions en matière de layout flexible. La meilleure base d'informations à ce sujet que j'ai trouvé à ce jour est ici : http://bradfrost.github.com/this-is-.../patterns.html
  • lubango
    Nouveau Candidat au Club
    Je ne m'y retrouve pas . Quelqu'un pourrait-il me donner les codes ? Je n'arrive pas à implémenter gridster dan ma page. Quelque chose me fait dire que le code n'est pas complet. Je suis amateur ; aidez moi