SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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)
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)
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