Comment gérer l'intégration du design dans alloy ? L'ensemble du billet : http://gaugau3000.wordpress.com/

1. Titanium Studio et le design
Aide à la gestion du design
#6 Meetup Paris Titanium
Gautier Pialat

2. Qui suis-je ?
*
Que fais-je ? ou vais-je ?
• Consultant sur des projets Business Intelligence
• Aide à la mise en place de projets agiles (Scrum)
• Co-Fondateur de captainspot (SM et développeur sur Titanium)
• Passio é pa l’agile, le Lea sta tup et l’e t ep e a iat
• Interventions chez Leeaarn

3. Le menu
*
Les différents plats
• Problématiques autour du design dans le développement mobile sur
Titanium
• Proposition de manière de travailler avec le designer
• P e d e e o pte les diffé e tes tailles d’é a s
• Faire du less TSS
• Conclusion

4. Les Problèmes rencontrés pour le
design
*
Lister ces problèmes pour pouvoir les résoudre
• Les tailles d’é a s so t diffé e tes.
• Les diagonales ont différents ratio selon les appareils
• Les densités sont différentes
• Le designer va faire des écrans : quel format ? Quelle résolution ?
• J’ai u e ha te et g aphi ue : o e t la fai e e t e da s tita iu

5. *
largeur PX longueur PX Ratio largeur DP longueur DP
Smatphone
Iphone
iPhone (non-retina) 320 480 1.5 320 480
iPhone (retina) 640 960 1.5 320 480
iPhone (retina 4") 640 1136 1.775 320 568
Android
Android phone (mdpi) 320 480 1.5 320 480
Android phone (hdpi) 480 800.00 1.66666666666667 320 533
Android phone (qHD hdpi) 540 960 1.77777777777778 360 640
Samsung Galaxy Nexus (HD xhdpi) 720 1184 1.64444444444444 360 592
Samsung Galaxy Nexus (HD xhdpi) with system keys 720 1280 1.77777777777778 360 640
Google Nexus 4 (xhdpi) with system keys 768 1280 1.66666666666667 384 640
Tablettes
Ipad
iPad (non retina) 768 1024 1.33333333333333 768 1024
iPad (retina) 1536 2048 1.33333333333333 768 1024
Android
Google Nexus 7 (tvdpi) 800 1280 1.6 600 961
Samsung Galaxy Tab 10.1 (mdpi) 800 1280 1.6 800 1280
Google Nexus 10 (xdpi) 1600 2560 1.6 800 1280

6. S’affranchir de la densité d’écran
*
les dp sont nos amis
• Le dp pe et d’ avoi u e taille ide ti ue su l’ e se le des appa eils
• Iphone utilise par défault les dp et android les px.
=> Utiliser une unité standart en dp sur titanium
tiapp.xml
<property name="ti.ui.defaultunit" type="string">dp</property>

7. *
Réaliser le design et l’intégration (1)Trouver une taille d’écran de
référence
• Trouver un standard pour les écrans
•320 dp X 480dp comme référence de cotes
•(320*4) px X (480*4) px soit 1280 px X 1920 px
• Mais pourquoi ?
=> Choix pou les otes d’u petit é a (o est su ue ot e desig e t e a su
cet écran)
=> Pour la résolution et au moment du découpage on assure des images hautes
qualités !
Et pour les plus grands écrans on ne va pas remplir celui-ci totalement ?

8. *
Réaliser le design et l’intégration (2)
Utilisons donc des conteneurs
•Découpons nos écrans en conteneurs (vues
sous titanium) en %
=> Nos UI vont alors remplir davantage
l’é a

9. Longueur et largeur différentes
*
S’adapter aux dimensions de l’écran
• Gérer une dimension différente pour les tablettes et smatphone.
• Pouvoi éti e des p op iétés g aphi ue d’ui.

10. *
Intégration charte graphique (ltss)Donnez moi des variables, des mixins, des include pour les
feuilles de style
- Intégration de la charte graphique dans app.ltss

11. *
Démonstration
02/04/2012

12. QUESTIONS
ET REPONSES
*

13. Sources utiliées pour la présentation
*
• https://github.com/dbankier/ltss
• http://gaugau3000.wordpress.com/
• https://github.com/gaugau3000/alloyProjectInit