Upcoming SlideShare
IHM et ergonomie du CMS open source Ametys LTE
- 1. IHM & Ergonomie Ametys LTE … pour des interfaces utilisateurs plus intuitives et ergonomiques RETROUVEZ NOUS SUR www.ametys.org @AmetysCMS AmetysCMS AmetysWebCMS
- 2. SOMMAIRE Technologies utilisées De ExtJS 3 à ExtJS 4 Aperçu de l’ergonomie Ametys (côté client)
- 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. Technologies
- 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. SOMMAIRE Technologies utilisées De ExtJS 3 à ExtJS 4 Aperçu de l’ergonomie Ametys (côté client)
- 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. Framework ExtJS Ametys 3.5 repose sur ExtJS 3.4
- 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. 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. 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. SOMMAIRE Technologies utilisées De ExtJS 3 à ExtJS 4 Aperçu de l’ergonomie Ametys (côté client)
- 13. IHM - Ergonomie Ruban Zones Outils
- 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. Zones • Espace configurable par l’utilisateur Drag & drop Responsive
- 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. IHM – Bouton du ruban • A quoi ressemble un bouton du ruban ? • Bouton toggle • Menu split Classique • Toolbar Gallery tailles Personnalisé
- 18. IHM – Bouton du ruban • Mais pas que… • Field Text Number Combo Checkbox Textarea • Dialog box launcher
- 19. Merci. VOUS SOUHAITEZ EN SAVOIR PLUS ? RECEVEZ LA DOCUMENTATION COMPLÈTE SUR AMETYS LTE
Be the first to comment