Donnez votre avis ! Depuis votre smartphone, sur :

Présentation au sujet: "Donnez votre avis ! Depuis votre smartphone, sur :"— Transcription de la présentation:

1 Donnez votre avis ! Depuis votre smartphone, sur : De nombreux lots à gagner toutes les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les TechDays Notation

2 Conception d'applications Windows 8 avec Blend 5
Eric Ambrosi Architecte UX I-Breed & Peps Interactive Intro session Windows 8, generale ou design (supprimer la mention inutile). Ne pas modifier ce template. Choisissez plutôt une slide d’intro pour votre sujet et supprimez les autres. Blend 5 pour Windows 8

3 ROAD MAP Blend 5 pour Windows 8 FORM FACTOR LE PROJET « GIFT SHOP »
RESPONSIVE BITMAP CHOISIR LE THÈME A MODIFIER MISE EN PLACE DU PROJET SKINNING CONTROLS & PAGES APPLICATION BAR QUESTIONS / RÉPONSES Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée. Idem pour les textes. Blend 5 pour Windows 8

4 FORM FACTOR Démo – Thème
Blend permet d’afficher un aperçu au design time de plusieurs combinaisons différentes. Plusieurs facteurs différents ont un impact sur l’affichage : Thème Résolution & DPI Orientation Portrait / Paysage Le Snapped mode et le Filled mode exclusifs à Windows 8 Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée. Idem pour les textes. Blend 5 pour Windows 8

5 LE PROJET « the GIFT SHOP »
Intégration graphique Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée. Idem pour les textes. Blend 5 pour Windows 8

6 RESPONSIVE BITMAP Démo – Intégration du logo
Windows 8 offre un redimensionnement dynamique de l’interface utilisateur selon la résolution et la densité d’affichage correspondant au DPI. Afin d’optimiser l’affichage des images sur chaque support, on les fournit en plusieurs résolutions. Elles sont choisies dynamiquement à l’exécution via une convention de nommage valable sur les deux frameworks. Sur les fichiers bitmap \illustration.scale-100.jpg ; \illustration.scale-140.jpg ; \illustration.scale-180.jpg Sur les répertoires \scale-100\illustration.jpg ; \scale-140\illustration.jpg ; \scale-180\illustration.jpg <Image Width =“100“ Height=“100” Source=“illustration.jpg“ Margin=“8,8,0,0”/> Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée. Idem pour les textes. Blend 5 pour Windows 8

7 CHOISIR UN Thème de base
Démo – Thème XAML Récupérer les thèmes. Les dictionnaires de thèmes sont récupérables dans le themeresources.xaml C:\Program Files (x86)\Windows Kits\8.0\Include\WinRT\Xaml\Design Stocker le thème choisit dans un dictionnaire de ressource Créer une liaison pour référencer le thème choisi, puis compiler HTML 5 / CSS 3 Modifier l’accès à la feuille de style par défaut au sein de toutes les pages. <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" /> Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée. Idem pour les textes. Blend 5 pour Windows 8

8 SkiNNING CONTROL - XAML
Démo - GridView Modification du template de la GridView Blend 5 pour Windows 8

9 SkiNNING CONTROL – HTML 5
Démo - WinJS.UI.ListView Démonstration du Live DOM & du Live Preview Création de règles de style personnalisées Blend 5 pour Windows 8

10 APPLICATION BAR Win RT Blend 5 pour Windows 8
La librairie d’icônes est fournie via la police de caractère Segoe UI Symbol Les icônes sont donc au format vectoriel Des styles de boutons prêts à l’emploi sont commentés dans le dictionnaire StandardStyles.xaml Ces styles héritent d’un style principal « AppButtonBarStyle » qui contient un modèle dédié Blend 5 pour Windows 8

11 APPLICATION BAR Win JS Dé-commenter le code qui gère la barre d’application dans le code HTML 5 de base Ajouter un bouton <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ id:'homeButton', label:'Home', icon:'home', section:'global', tooltip:'Go to the home page', type: 'button‘ }"></button> Blend 5 pour Windows 8

12 MERCI !!! Blend 5 pour Windows 8

13