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
Conception d'applications
Windows 8 avec Blend 5
Eric Ambrosi
Architecte UX
I-Breed & Peps Interactive
Blend 5 pour Windows 8
http://www.tweened.org
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
FORM FACTOR
Blend 5 pour Windows 8
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
Démo – Thème
LE PROJET « THE GIFT SHOP »
Blend 5 pour Windows 8
Intégration graphique
RESPONSIVE BITMAP
Blend 5 pour Windows 8
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”/>
Démo – Intégration du logo
CHOISIR UN THÈME DE BASE
Blend 5 pour Windows 8
XAML
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 Kits\8.0\Include\WinRT\Xaml\Design
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" />
Démo – Thème
SKINNING CONTROL - XAML
Blend 5 pour Windows 8
Démo - GridView
SKINNING CONTROL – HTML 5
Blend 5 pour Windows 8
Démo - WinJS.UI.ListView
APPLICATION BAR
Blend 5 pour Windows 8
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é
APPLICATION BAR
Blend 5 pour Windows 8
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>
MERCI !!!
Blend 5 pour Windows 8
www.tweened.org
Formez-vous en ligne
Retrouvez nos évènements
Faites-vous accompagner
gratuitement
Essayer gratuitement nos
solutions IT
Retrouver nos experts
Microsoft
Pros de l’ITDéveloppeurs
www.microsoftvirtualacademy.comhttp://aka.ms/generation-app
http://aka.ms/evenements-
developpeurshttp://aka.ms/itcamps-france
Les accélérateurs
Windows Azure, Windows Phone,
Windows 8
http://aka.ms/telechargements
La Dev’Team sur MSDN
http://aka.ms/devteam
L’IT Team sur TechNet
http://aka.ms/itteam