IHM et ergonomie du CMS open source Ametys LTE

1 162 vues

Publié le

Zoom sur l'IHM et l'ergonomie d'Ametys LTE, la nouvelle génération du logiciel Ametys en cours de développement

Publié dans : Technologie, Formation
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 162
Sur SlideShare
0
Issues des intégrations
0
Intégrations
180
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

IHM et ergonomie du CMS open source Ametys LTE

  1. 1. IHM & Ergonomie Ametys LTE … pour des interfaces utilisateurs plus intuitives et ergonomiques RETROUVEZ NOUS SUR www.ametys.org @AmetysCMS AmetysCMS AmetysWebCMS
  2. 2. SOMMAIRE Technologies utilisées De ExtJS 3 à ExtJS 4 Aperçu de l’ergonomie Ametys (côté client)
  3. 3. Ametys – ergonomie smb://leonard/shared/Technique/Cours%20IN SA/Cours/Cours%201%20%20Intro%20Appli%20Web.pdf smb://leonard/shared/Technique/Cours%20IN SA/Cours/Cours%202%20-%20Ametys.pdf
  4. 4. Technologies
  5. 5. Ametys – architecture CHARTE GRAPHIQUE <XML/XSLT> Plugins spécifiques Système d’information <XML/XSLT> Java Paramétrage (droits, workflows, types de contenus, …) Plugins Standard <XML> Noyau CMS Workflow Repository Apache JackRabbit Runtime Ametys Apache Cocoon Composants Open-Source JCR - Contenus SGBDR - Droits
  6. 6. SOMMAIRE Technologies utilisées De ExtJS 3 à ExtJS 4 Aperçu de l’ergonomie Ametys (côté client)
  7. 7. Framework ExtJS Créer facilement des RIA (Rich Internet Application) • interfaces user-friendly • composants de qualité      formulaires avancés tableaux riches et dynamiques menus, barre d’outils gestion des onglets etc..
  8. 8. Framework ExtJS Ametys 3.5 repose sur ExtJS 3.4
  9. 9. Vers ExtJS 4 • Améliorations de performances • nouveau système de classe • widgets prêts à utiliser • moteur MVC • Nouvelle architecture • nouveau package data • refonte composants graphiques Le ruban Office Ametys basé sur ExtJS 4.2
  10. 10. Avantages Développeurs Application fonctionnelle sur tous les navigateurs Composants riches et prêts à l’emploi Code plus lisible et stable API côté client repensée pour une meilleure ergonomie Documentation complète du code client Ametys http://releases.ametys.org/api/3.7_LTE-dev/
  11. 11. IHM – API Ametys • Consulter la documentation en ligne http://releases.ametys.org/api  Réglages  Recherche générale (y compris privé) http://releases.ametys.org/api  Filtre local parmi l’affiché
  12. 12. SOMMAIRE Technologies utilisées De ExtJS 3 à ExtJS 4 Aperçu de l’ergonomie Ametys (côté client)
  13. 13. IHM - Ergonomie Ruban Zones Outils
  14. 14. Ruban (ribbon) • Composition  Titre (application et contextuel)  Menu  Onglets (statique et contextuel)  Groupes (avec lanceur de dialogue)  Contrôles (grands, petits, très-petits) • Caractéristiques  Collapse  Redimensionnement
  15. 15. Zones • Espace configurable par l’utilisateur  Drag & drop  Responsive
  16. 16. Icônes • 3 tailles d’icônes  Large : 48x48, utilisée dans les tooltips  Medium : 32x32, utilisée par les boutons larges  Small : 16x16, utilisée par les boutons petits ou très petits, les boites de dialogues, … 48x48 pixels 32x32 pixels 16x16 pixels
  17. 17. IHM – Bouton du ruban • A quoi ressemble un bouton du ruban ? • Bouton toggle • Menu split Classique • Toolbar Gallery tailles Personnalisé
  18. 18. IHM – Bouton du ruban • Mais pas que… • Field Text Number Combo Checkbox Textarea • Dialog box launcher
  19. 19. Merci. VOUS SOUHAITEZ EN SAVOIR PLUS ? RECEVEZ LA DOCUMENTATION COMPLÈTE SUR AMETYS LTE

×