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