IHM et ergonomie du CMS open source Ametys LTE

1,270 views

Published on

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

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,270
On SlideShare
0
From Embeds
0
Number of Embeds
180
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×