Your SlideShare is downloading. ×
0
Titanium studio :  intégration design dans alloy
Titanium studio :  intégration design dans alloy
Titanium studio :  intégration design dans alloy
Titanium studio :  intégration design dans alloy
Titanium studio :  intégration design dans alloy
Titanium studio :  intégration design dans alloy
Titanium studio :  intégration design dans alloy
Titanium studio :  intégration design dans alloy
Titanium studio :  intégration design dans alloy
Titanium studio :  intégration design dans alloy
Titanium studio :  intégration design dans alloy
Titanium studio :  intégration design dans alloy
Titanium studio :  intégration design dans alloy
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Titanium studio : intégration design dans alloy

458

Published on

Comment gérer l'intégration du design dans alloy ? …

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

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • un ptit lien pour faire la promo de mon blog sur titanium http://www.tiblogging.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
458
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×