DES205 - Ne ratez pas le METRO

906 vues

Publié le

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
906
Sur SlideShare
0
Issues des intégrations
0
Intégrations
308
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

DES205 - Ne ratez pas le METRO

  1. 1. palais descongrèsParis7, 8 et 9février 2012
  2. 2. Ne ratez pas le Metro(DES205)Mardi 7 février 2012 11h00Audrey Petit – Consultante – Microsoft ServicesMichel Rousseau – Consultant - Bewise
  3. 3. Bewise « Pure Player » Microsoft depuis 1999 Diffuse une expertise Ouverture d’une novatrice agence sur Paris Contribue à l’émergence de logiciels performants et ergonomiques Retrouvez-nous sur le stand 47
  4. 4. Microsoft Services – Vue d’ensembleUne expertise tout au long du cycle de vie informatique Entreprise Strategy Microsoft Consulting Services Support Premier Evaluation Développement Stabilisation Support Planification Déploiement Opérations Alignement business & IT Déploiement et adoption Optimisation et Opération Partenaires
  5. 5. Microsoft Consulting Services : 6 priorités ClientProductivity Productivity Go Big in Win the Services Tier 1in the Cloud On Premises Dynamics Datacenter
  6. 6. Agenda Evolution du « kikoo-lol qui clignote de partout » au « fun, branché et bigarré ». Metro : toutes les pièces détachées. Questions.
  7. 7. L’évolution du design des applis L’informatique est en constante évolution depuis 20 ans (dixit Lapalisse). Le design est en très forte évolution depuis 5 ans.
  8. 8. L’évolution du design des applis Changement des comportements face à l’informatique
  9. 9. L’évolution du design des applis Changement des supports et des formats
  10. 10. L’évolution du design des applis Changement des devices (puissance, miniaturisation, interfaçage) et des comportements induits.
  11. 11. L’évolution du design des applisChangement sociétal, effets de bordstechnologiques, évolution du mode deconsommation, …, changement récursif, par ailleurs.
  12. 12. L’évolution du design des applisCeci induit un changement de perception desapplications, tant au niveau de l’ergonomie que de sonressenti (UX), tant au niveau de son fonctionnel que deson design.
  13. 13. L’évolution du design des applis La prochaine évolution remarquable en terme d’interface est Metro: Dynamisme, clarté, simplicité, ergonomie, modernité. Tuiles, polices, animations, couleurs, photos, icônes, layout .
  14. 14. L’exemple par le web Le web est une interface fortement contrainte techniquement et de manière transactionnelle : Contrainte de débit, portabilité, interopérabilité, maintenance, sécurité, g estion des standards… Contraintes de l’héritage des modes de navigation (scroll souris, lecture verticale, temps de réponse…)
  15. 15. L’exemple par le web Comment transposer un site typiquement « années 90 » en un site volontairement «10’s »? Un exemple concret : le site Microsoft Techdays 95 revampé.
  16. 16. L’exemple par le web L’exemple réel :
  17. 17. L’exemple par lewebLa version redesignéeconforme :
  18. 18. L’exemple par le web Etude de cas : Design : 16 couleurs, palette web, transparence par alpha 1 bit (.gif ), iconographie légère (débit limité), gif animé, polices système, taille des polices limitées, résolution limitée. Technique : Frames, tableaux, liens en dur, javascripts (roll- over)…pas de CSS, pas de web sémantique, indexation limitée, pas de lissage, etc…
  19. 19. L’exemple par le web Revamper, oui, mais revamper bien: Iso-fonctionnel. Metro.
  20. 20. Revamper le design S’affranchir de l’existant Passer en mode horizontal, plus logique pour la lecture sur tablette. Travailler avec une grille. Redéfinir l’ergonomie. Bien sûr, oublier les limitations du passé… Bien sûr, tenir compte des nouvelles…
  21. 21. Revamper le design La partie Design Retour au mode papier/ tableau/ brainstorming Définir un principe ergonomique Créer une première ébauche
  22. 22. Revamper le design La partie Design Faire une conversion papier/écran en maquettant sous Photoshop, composant par composant.
  23. 23. Du design au code…Les joies et périls de l’intégration…
  24. 24. Les clefs de Metro Les formes icones
  25. 25. Les clefs de Metro Les polices de caractères Segoe Arial Courier Verdana
  26. 26. Les clefs de Metro Les polices de caractères A A A A A 1 1 1 1 1 M M M M M Segoe Segoe UI Segoe Segoe Segoe Light WP Black Marker Script
  27. 27. Les clefs du Metro Les couleurs  Couleur de Font : noire ou blanche  Harmoniser la palette de couleurs  Eviter les couleurs saturées 1 2
  28. 28. Les clefs du Metro Les différentes parties Header Navigation Body Footer
  29. 29. DEMOApplication du design style Metroavec Silverlight 5 et Expression Blend
  30. 30. Des questions ?
  31. 31. Pour aller plus loin Prochaines sessions des Dev Camps Chaque semaine, les DevCamps 10 février Live Open Data - Développer des applications riches avec le ALM, Azure, Windows Phone, HTML5, OpenData 2012 Meeting protocole Open Data http://msdn.microsoft.com/fr-fr/devcamp 16 février Live Azure series - Développer des applications sociales sur la 2012 Meeting plateforme Windows Azure 17 février Live Comprendre le canvas avec Galactic et la librairie three.js Téléchargement, ressources et 2012 Meeting 21 février Live La production automatisée de code avec CodeFluent Entities 2012 Meeting toolkits : RdV sur MSDN 2 mars 2012 Live Meeting Comprendre et mettre en oeuvre le toolkit Azure pour Windows Phone 7, iOS et Android http://msdn.microsoft.com/fr-fr/ 6 mars Live Nuget et ALM 2012 Meeting Les offres à connaître 9 mars Live Kinect - Bien gérer la vie de son capteur 2012 Meeting 13 mars Live 90 jours d’essai gratuit de Windows Azure 2012 Meeting Sharepoint series - Automatisation des tests www.windowsazure.fr 14 mars 2012 Live Meeting TFS Health Check - vérifier la bonne santé de votre plateforme de développement 15 mars Live Azure series - Développer pour les téléphones, les tablettes et Jusqu’à 35% de réduction sur Visual Studio 2012 Meeting le cloud avec Visual Studio 2010 Pro, avec l’abonnement MSDN 16 mars 2012 Live Meeting Applications METRO design - Désossage en règle dun template METRO javascript www.visualstudio.fr 20 mars Live Retour dexpérience LightSwitch, Optimisation de laccès aux 2012 Meeting données, Intégration Silverlight 23 mars Live OAuth - la clé de lutilisation des réseaux sociaux dans votre 2012 Meeting application
  32. 32. Merci ! Michel Rousseau Audrey Petit  Consultant Bewise  Consultante Microsoft Services  michel.rousseau@bewise.fr  audrey.petit@microsoft.com

×