Je cherche à représenter un organigramme de personnel : 1. dans une forme navigable avec javascript, 2. en image statique pour impression (image ou PDF).
Quelles types de représentations, et éventuellement quels outils vous pouvez me recommander ?
Je cherche à représenter un organigramme de personnel : 1. dans une forme navigable avec javascript, 2. en image statique pour impression (image ou PDF).
Quelles types de représentations, et éventuellement quels outils vous pouvez me recommander ?
@fsoulabaille Oui, mais un peu plus sexy
Dernière mise à jour le 20 novembre 2001
et qui permette de naviguer dans des organigrammes plus grands, comme par exemple :
▻http://www.lestaxinomes.org/spip.php?page=arbre&id_rubrique=12
ou éventuellement :
▻http://lifemap.univ-lyon1.fr/mobile.index.html
mais en gardant la représentation verticale typique des administrations.
Hmmm du #flash si je ne me trompe pas. J’ai besoin que ça soit fait en #javascript, pas de flash. Ça vient du concours suivant :
▻https://community.articulate.com/articles/interactive-org-charts-elearning
qui est plus orienté vers la présentation du personnel. Je cherche plutôt une manière de générer automatiquement un arbre, d’une profondeur quelconque à pouvoir explorer de façon dynamique, et d’un autre côté : à pouvoir imprimer dans son ensemble.
Avec d3.js, quelques exemples intéressants :
– tous les arbres :
▻http://blockbuilder.org/search#text=tree
– un arbre navigable :
▻https://bl.ocks.org/mbostock/4339083
– un autre, du genre de celui de taxinomes :
▻http://blockbuilder.org/nehiljain/bd4df45db78262f1d943bc8b097a0a82
Celui-là est original :
▻http://blockbuilder.org/nitaku/b82c356f1969911042d6
Mais rien qui ressemble de près à un organigramme
▻https://en.wikipedia.org/wiki/Organizational_chart
Comme dit Stupeflip :
A bas la hiérarchie
Basé sur les bibliothèques suivantes :
– d3.js
– JavaScript InfoVis Toolkit
▻https://philogb.github.io/jit
– vis.js
– leaflet.js
– orgchart
►https://github.com/dabeng/OrgChart
– treant.js, basé sur jquery et raphael.js
►https://fperucic.github.io/treant-js
▻https://jquery.com
►https://dmitrybaranovskiy.github.io/raphael
Perso j’utilise le spacetree de JIT (JavaScript InfoVis Toolkit) pour les taxinomes et je n’ai pas encore trouvé mieux comme librairies pour ça, même si elle semble un peu vieillissante et que son API n’est pas super user friendly.
Qu’est-ce qu’un framework ? Qu’est ce qu’un minxin ? Faut il choisir LESS ou SASS ? Bootstrap ou Foundation ? Qu’est-ce qui différencie Bourbon, Bourbon Neat et Semantic-UI ? Dois-je continuer avec Z-SPIP ? Passer à SPIP-r ? Pourquoi le soleil, pourquoi la pluie ?
Je me sens un peu perdu, en ce moment, et c’est assez horripilant...
Avant de répondre à ces questions, je voudrais commencer par essayer de lister ces nouveaux venus, qui sont loin d’être familiers à toutes celles et ceux qui comme moi, font des sites web.
D’après Wikipedia, un framework c’est « un ensemble cohérent de composants logiciels structurels, qui sert à créer les fondations ainsi que les grandes lignes de tout ou d’une partie d’un logiciel »
On dirait bien que tous ces noms correspondent bien à des frameworks, ou des parties de frameworks. Mais proposés par autant d’entreprises, ont une réelle utilité et ne sont pas là juste pour faire mousser ces entreprises ?
Je vous propose dans un premier temps un tableau avec ce que j’ai pu récolter comme infos en une après midi (entrecoupée de lignes de code et de coups de fil...). J’essayerai ensuite de compiler vos avis et commentaires, liens, remarques, etc. dans un article plus élaboré.
|{{}}|{{Lien}}|{{Catégorie}}|{{Description...}}|{{Commentaire}}|
|Bourbon|▻http://bourbon.io/|librairie de fonctions CSS|« une librairie de fonctions simple et légère pour SASS »||
|Bourbon Neat|▻http://neat.bourbon.io/|framework HTML|« un framework HTML ultra-léger et sémantique pour SASS et BOURBON »|contient des mixins|
|Jquery|▻http://jquery.com/|bibliothèque de fonctions et scripts javascripts|fast, small, and feature-rich JavaScript library |intégrée à SPIP|
|Semantic UI|▻http://semantic-ui.com/|??|« Semantic donne la possiblité aux designers et développeurs de partager un même langage pour la création d’interfaces utilisateurs »||
|SASS|▻http://sass-lang.com/|pré-processeur de CSS|||
|LESS|▻http://lesscss.org/|pré-processeur de CSS|||
|Z|▻http://www.yterium.net/Un-framework-HTML-est-il-possible|framework HTML|||
|SPIP-r|▻http://spipr.nursit.com/|framework HTML + squelettes|« Squelettes et framework pour le développement front avec SPIP »|s’utilise « par dessus » Zcore (cf l[’article de Teddy->▻http://contrib.spip.net/Difference-entre-Zcore-et-Zpip-v1-x] sur ce sujet)|
|Foundation|▻http://foundation.zurb.com/|framework (juste html ou complet avec css et js ?)|« Le framework de développement front responsive le plus avancé du monde »|existe sous forme de plugin SPIP : [▻http://contrib.spip.net/Foundation-4-Spip->http://contrib.spip.net/Foundation-4-Spip]|
|CSS Imbriquées|▻http://www.paris-beyrouth.org/tutoriaux-spip/article/plugin-spip-css-imbriques-pre|Pré-processeur de CSS||proposée par Arno* sur son site|
|HTML5 Boiler Plate|►http://html5boilerplate.com| ?? |« le squelette coté-client le plus populaire de tout le web »||
|PhoneGAP|▻http://phonegap.com/||PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. |utilise nodejs|
|Node JS|▻http://nodejs.org/|appli ? framework ?|Node.js is a platform built on [Chrome’s JavaScript runtime->▻http://code.google.com/p/v8/] for easily building fast, scalable network applications ||
Mettons de coté les logiciels vraiment très orientés smartphones et concentrons-nous plus sur les outils pour faire des sites web.
On pourrait conclure que s’il nous faut juste un bon framework HTML + un bon pré-processeur de CSS + un bonne bibiothèque de fonctions javaScript, tout en restant dans du SPIP, pas trop intrusif, maintenable, etc. le triplet Zcore + Css imbriquées + jQuery est parfait
Cependant d’autres choix non seulement possibles, mais proposés, voires promotionnés(...) :
Zcore + SPIPr + LESS + Bootstrap
Zcore + foundation
SPIP tout court + CSS imbriquées
Et aucun ne fait véritablement l’unanimité.
désolé pour l’aspect, je pensais pouvoir mettre un tableau au format SPIP dans mon post...
le tableau est un peu mieux présenté :
▻http://contrib.spip.net/Le-point-sur-les-outils-pour-squelettes-recents?var_mode=preview
jQuery: » jQuery 1.1.4: Faster, More Tests, Ready for 1.2
►http://jquery.com/blog/2007/08/24/jquery-114-faster-more-tests-ready-for-12
What would a release be without some speed improvements?$(”#id”) improved by 4919% on Firefox 2!
#firefox #jquery #javascript #test #rapidité #performance #groupe:clever-age
Live Query | jQuery Plugins
►http://jquery.com/plugins/project/livequery
Live Query (formally Behavior) utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
#jQuery #plugin #behavior #ajax #attachement #événement #groupe:clever-age
jQuery : Blog : » Greybox Redux
►http://jquery.com/blog/2006/02/10/greybox-redux
le plus léger des lightbox, en LGPL et code rigolo
#javascript #spip #spip-zone #photo
Thickbox - One box to rule them all.
►http://jquery.com/demo/thickbox
#ajax #css #design #javascript #photo #popup