Blend est l'outil indispensable lorsque l'on souhaite créer des interfaces utilisateurs riches. Avec l'arrivée de Windows 8, Blend permet de concevoir des applications METRO au format HTML 5 et XAML de grande qualité. Dans cette session, nous aborderons les nouvelles fonctionnalités étonnantes de Blend 5 dédiée aux applications Modern UI. Nous verrons également comment ce dernier maximise votre productivité et le développement d'applications Modern UI au format HTML et XAML. La méthodologie et les fonctionnalités seront décrites en mode pas à pas, à partir d’un cas concret d’intégration.

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

2. Conception d'applications
Windows 8 avec Blend 5
Eric Ambrosi
Architecte UX
I-Breed & Peps Interactive
http://www.tweened.org
Blend 5 pour Windows 8

3. ROAD MAP
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
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
Blend 5 pour Windows 8

5. LE PROJET « THE GIFT SHOP »
Intégration graphique
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-100illustration.jpg ; scale-140illustration.jpg ; scale-180illustration.jpg
<Image Width =“100“ Height=“100” Source=“illustration.jpg“ Margin=“8,8,0,0”/>
Blend 5 pour Windows 8

7. CHOISIR UN THÈME DE BASE
XAML
Démo – Thème
1.Récupérer les thèmes.
Les dictionnaires de thèmes sont récupérables dans le themeresources.xaml
C:Program Files (x86)Windows Kits8.0IncludeWinRTXamlDesign
2.Stocker le thème choisit dans un dictionnaire de ressource
3.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" />
Blend 5 pour Windows 8

8. SKINNING CONTROL - XAML
Démo - GridView
Blend 5 pour Windows 8

9. SKINNING CONTROL – HTML 5
Démo - WinJS.UI.ListView
Blend 5 pour Windows 8

10. APPLICATION BAR
Win RT
– 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 !!!
eric@i-breed.com
www.tweened.org
Blend 5 pour Windows 8

13. Développeurs Pros de l’IT
http://aka.ms/generation-app Formez-vous en ligne www.microsoftvirtualacademy.com
http://aka.ms/evenements-
developpeurs Retrouvez nos évènements http://aka.ms/itcamps-france
Les accélérateurs
Faites-vous accompagner
Windows Azure, Windows Phone,
gratuitement
Windows 8
Essayer gratuitement nos http://aka.ms/telechargements
solutions IT
La Dev’Team sur MSDN Retrouver nos experts L’IT Team sur TechNet
http://aka.ms/devteam Microsoft http://aka.ms/itteam