Titanium Studio et le design Aide à la gestion du design

#6 Meetup Paris Titanium

Gautier Pialat

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

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

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

*

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

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>

*

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 ?

*

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

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.

*

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

*

Démonstration

02/04/2012

QUESTIONS

ET REPONSES

*

Sources utiliées pour la présentation

*

• https://github.com/dbankier/ltss

• http://gaugau3000.wordpress.com/

• https://github.com/gaugau3000/alloyProjectInit