0
Donnez votre avis !                   Depuis votre smartphone, sur :                    http://notes.mstechdays.fr    De n...
Conception dapplications        Windows 8 avec Blend 5                                       Eric Ambrosi                 ...
ROAD MAP        FORM FACTOR        LE PROJET « GIFT SHOP »        RESPONSIVE BITMAP        CHOISIR LE THÈME A MODIFIER    ...
FORM FACTOR                                                                      Démo – Thème        Blend permet d’affich...
LE PROJET « THE GIFT SHOP »                                 Intégration graphiqueBlend 5 pour Windows 8
RESPONSIVE BITMAP                                                               Démo – Intégration du logo        Windows ...
CHOISIR UN THÈME DE BASE       XAML                                                                                       ...
SKINNING CONTROL - XAML                          Démo - GridViewBlend 5 pour Windows 8
SKINNING CONTROL – HTML 5                         Démo - WinJS.UI.ListViewBlend 5 pour Windows 8
APPLICATION BAR        Win RT             –   La librairie d’icônes est fournie via la police de caractère Segoe UI Symbol...
APPLICATION BAR        Win JS             –   Dé-commenter le code qui gère la barre d’application dans le code HTML 5 de ...
MERCI !!!        eric@i-breed.com        www.tweened.orgBlend 5 pour Windows 8
Développeurs                                                         Pros de l’IT http://aka.ms/generation-app       Forme...
Prochain SlideShare
Chargement dans... 5
×

Conception d’une application pour Windows 8 avec Blend 5

343

Published on

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.

0 commentaires
0 mentions J'aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Be the first to like this

Aucun téléchargement
Vues
Total des vues
343
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
0
Actions
Partages
0
Téléchargements
6
Commentaires
0
J'aime
0
Ajouts 0
No embeds

No notes for slide
  • Notation
  • 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.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.Idem pour les textes.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.Idem pour les textes.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.Idem pour les textes.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.Idem pour les textes.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.Idem pour les textes.
  • Modification du template de la GridView
  • Démonstration du Live DOM & du Live PreviewCréation de règles de style personnalisées
  • Transcript of "Conception d’une application pour Windows 8 avec Blend 5"

    1. 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 TechDayshttp://notes.mstechdays.fr
    2. 2. Conception dapplications Windows 8 avec Blend 5 Eric Ambrosi Architecte UX I-Breed & Peps Interactive http://www.tweened.orgBlend 5 pour Windows 8
    3. 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ÉPONSESBlend 5 pour Windows 8
    4. 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 8Blend 5 pour Windows 8
    5. 5. LE PROJET « THE GIFT SHOP » Intégration graphiqueBlend 5 pour Windows 8
    6. 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. 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. 8. SKINNING CONTROL - XAML Démo - GridViewBlend 5 pour Windows 8
    9. 9. SKINNING CONTROL – HTML 5 Démo - WinJS.UI.ListViewBlend 5 pour Windows 8
    10. 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. 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. 12. MERCI !!! eric@i-breed.com www.tweened.orgBlend 5 pour Windows 8
    13. 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 accompagnerWindows 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×