Technode

Incorporer une typo dans un projet Silverlight via Blend

La première chose qu'il faut savoir, c'est que si vous voulez embarquez une typo dans un projet Silverlight, il faudra vous assurer que son nom ne comporte pas de caractères spéciaux. J'en ai fait l'expérience, un + qui traîne et rien ne va plus !

Pour être sûr de votre fichier, faites un clic droit dessus. Dans l'onglet détail, vous avez une ligne "Titre" : c'est là que ça se passe.

Pour modifier le Titre d'un fichier typo, vous pouvez passer par un petit éditeur gratuit, simple à utiliser : Type Light (ATTENTION : cet utilitaire ne fonctionne pas sous Vista)

Il suffit d'ouvrir le fichier avec cet utilitaire, d'aller dans le menu Font / Names et vous pourrez modifier les noms qui posent problème.

Sous Blend (2 ou 3), pour embarquer une typo dans votre projet en passant par le Font Manager, sélectionnez la typo et n'oubliez pas de préciser les jeux de typo que vous souhaitez importer. Cochez la case all glyphs pour avoir la version complète.

C# for designers

Evidemment, le titre fait un peu peur : mettre designer et C# dans la même phrase, c'est peu commun. Pourtant lorsque l'on s'intéresse à une technologie comme silverlight, et que l'on porte la casquette de designer interactif, connaître un minimum de code est essentiel. Cela permet de s'affranchir du développeur, du moins pour des actions simples telles que lancer un storyboard ou une vidéo. Je ne vous referais pas la session ici, mais c'est une session intéressante, à voir en podcast si vous êtes designer interactif et que vous souhaitez faire un peu plus de choses "seuls".

Le future d'Expression Blend

Douglas Oleson et Christian Schormann nous ont proposé de découvrir le futur de Blend (en fait ce qu'il y aura dans la version finale de Blend 3).

Sketchflow, c'est LA fonctionnalité de Blend 3 qui fait parler d'elle (ne la cherchez pas dans la beta actuellement téléchargeable, elle n'y figure malheureusement pas).
Sketchflow, c'est la possibilité de prototyper un projet directement dans Blend. De créer une arborescence et les liens qui mènent d'une page à l'autre, de soumettre un projet sous forme de site internet en Silverlight ou d'application WPF au client qui pourra l'annoter directement et renvoyer ses remarques à l'équipe de conception.
Pour formaliser une atmosphère de prototypage, de nouveaux styles sont disponibles, les "Wiggles styles" qui donnent l'impression de dessins fait à main levée (on aime... ou pas, mais la distinction est intelligente).

La seconde nouveauté qui intéressera tous les designers interactifs porte le nom de Behaviors : grâce à eux, l'utilisateur de Blend pourra enfin apporter des comportements à son interface sans faire appel à un développeur. Passer d'une page à l'autre, lancer un storyboard, des comportements basiques qui étaient pourtant jusqu'ici immpossible à mettre en place sans ouvrir une page de C#.

Une troisième nouveauté aide le designer à passer du dessin au composant. Les parts sont les éléments qui doivent apparaître dans la construction d'un composant. Il est possible de transformer un élément graphique en "part" afin de lui donner un comportement. La aussi, le designer interactif gagne en autonomie. 

Même si il reste beaucoup de modifications à apporter sur l'interface elle-même pour la rendre plus designer-friendly, elle accorde une autonomie accrue pour le designer interactif avec cette nouvelle version de Blend.

Mix 09 : 2ème jour - Keynote

Le Keynote de ce matin était axé sur 2 points : Internet Explorer 8 et "Changer les comportements par le design" ou le design expliqué aux développeurs.
Dean Hachamovitch nous a confirmé ce qui avait été annoncé l'année dernière au sujet d'IE8, à savoir le respect des standards (à vérifier puisque IE8 est disponible depuis aujourd'hui !) une sécurité et des performances accrues et la fonctionnalité des WebSlices qui permet d'avoir un accès direct à des zones actualisées de sites qui restent totalement accessibles pendant la consultation d'un autre site.
Dans un second temps, Debrah Allen nous a expliqué pourquoi et comment elle a pu designer des flacons de médicaments. Le but de cette intervention était clairement de sensibiliser les développeurs à l'importance du Design. Si on comprends assez vite l'intérêt de cette approche et l'effort consenti par Microsoft pour ouvrir les développeurs au monde du design, j'ai personnellement regretté une intervention très longue pour un message biaisé par 30 minutes d'autocongratulation.
Un keynote intéressant donc, mais beaucoup moins riche que celui d'hier.

Blend 3 : Import Photoshop et Illustrator

Joanna Mason a mené une session sur l'import de fichiers photoshop et illustrator directement dans Blend. Le côté bluffant c'est que lorsque vous récupérez un fichier PSD qui contient des masques, vous retrouvez ces mêmes masques sous Blend, vectoriels et modifiables. Les masques d'opacités sont également préservés. Les groupes sont transformés en Canvas et en fonction de la nature des éléments d'origine vous aurez du bitmap, du vectoriel clippé ou non, avec masque d'opacité ou non.

Une très bonne session, sur un format court (20 minutes) animé par Joanna qui fait partie de l'équipe produit de Blend.

Mix09 : it's good time for design :)

Et oui, le départ de la course à l'info a été donné ce matin lors du keynote. Une première journée riche en informations et en rencontres. Les deux intervenants principaux, Bill Buxton et Scott Guthrie nous ont ouvert les portes de Silverlight 3 et Blend 3. Résumé !

Bill Buxton : "It's good time for design"
Et ça c'est une bonne nouvelle :). La "vision" du principal researcher de Microsoft Research est la suivante : l'objet n'est pas l'essentiel, c'est le contexte de son utilisation qui est au coeur du design. L'expérience utilisateur, même si le terme a été beaucoup moins utilisé cette année, reste l'axe central de la vision du design pour Bill Buxton.

Lors de la réalisation d'un projet, le challenge du designer est d'apporter une multitude de propositions qui vont permettre de poser les bonnes questions et donc d'y apporter les bonnes réponses. Mais réaliser 15 propositions pour un même projet, ce n'est pas du domaine du possible à moins de bénéficier de budgets démesurés. La solution réside dans le prototype. Il n'est pas question de technologie à ce stade, un papier et un crayon suffisent pour esquisser des pages statiques. Mais que cela ne nous fasse pas oublier les transitions qui permettent de passer d'un état de l'application à un autre parce qu'elles sont aussi importantes que les états statiques.

  Cette introduction a permis ensuite à Scott Guthrie et son éternel polo rouge de nous faire ses fameuses annonces, je ne les relaterais pas toutes ici, mais essentiellement celles qui peuvent intéresser les non-développeurs.

"Microsoft crée des outils et des technologies optimisées pour construire la nouvelle génération d'applications web", les RIA sont clairement ciblées, et Silverlight 3 est LA nouveauté importante.

Web 3 : la nouvelle feature qui va changer la vie des webdesigners c'est la SuperPreview. Web 3 permet d'avoir une vue du site dans plusieurs navigateurs sans avoir à les installer sur la machine. Une vue "superposée" montre les différences d'interprétation d'un navigateur à l'autre, et une vue partagée permet au webdesigner de voir son site dans 2 navigateurs différents. Les autres features ont été beaucoup moins développées : Standards based web authoring, Multi-language targeting, Secure FTP support, CSS Diagnostics.

Silverlight c'est 300.000 Développeurs et Designers, 200 Sites et Produits Microsoft, 10.000 applications...

Et Silverlight 3 c'est :

L'utilisation des possibilités offertes par la carte graphique (GPU hardware acceleration), de nouveaux codecs supportés (H.264, AAC, MPEG-4), du "smooth streaming" avec l'adaptation de l'image au flux, la perspective 3D, les effets (ombre portée, flou...), des améliorations de Deepzoom, une meilleure qualité de texte , le support du multi-touch, plus de 100 contrôles disponibles.

Le plug-in a été fortement enrichi puisqu'il inclue de nouvelles API, de nouveaux codecs, des centaines de nouvelles fonctionnalités et le support du "Out of Browser". Et pourtant, le plug-in Silverlight 3 est plus léger de 40K par rapport à la version précédente. 

Enfin, Blend 3 avec des nouveautés qui vont changer la vie des Silverlighter.

• Sketchflow qui permet de faire du prototypage. Jon Harris nous a fait une démonstration de cette fonctionnalité qui fait déjà beaucoup parler d'elle. Le principe est de créer les différentes pages de l'application et de créer les liens entre elles. A l'exécution, il est possible de laisser des commentaires et de partager les remarques des différents intervenants : cliens, équipe de conception, utilisateur final...

• L'import d'Illustrator et Photoshop

• Les Behaviors (comportements)

• Les sample data

• L'intellisense dans Blend, avec la possibilité d'éditer du XAML, Javascript, VB et C#

• La possibilité de créer une occurence du site en ligne consulté, visible hors du navigateur (Out of Browser feature)

Silverlight 3 est disponible en version Beta, ainsi que la preview de Blend 3 (qui ne comporte pas la fonctionnalité sketchflow)

Gérer l'aspect sélectionné d'un ListBoxItem

La ListBox, c'est tout un poème !

Que ce soit en WPF ou en Silverlight, la première fois que l'on doit s'attaquer à la mise en forme d'une ListBox, c'est en général assez douloureux. Le fait est que la ListBox est un mix de différents styles et modèles, et ce n'est pas toujours évident de savoir où aller pour modifier telle ou telle propriété.

Par expérience, je sais que si il y a une chose que l'on cherche un moment avant de le trouver, c'est le selected d'un Item,vous savez ce bleu sympathique qui apparaît lorsque vous sélectionnez une ligne de la liste.

Il faut d'abord comprendre comment est structurée la liste, et comment elle gère ses éléments.

Les Style / Modèle de la ListBox définissent son apparence : c'est là que vous pourrez par exemple modifier sa couleur de fond et de contour.

 

Il y a ensuite un Modèle qui s'appelle ItemsPanelTemplate, qui gère l'agencement des éléments qui sont affichés dans la ListBox. Par défaut c'est un VirtualizingStackPanel en WPF, un StackPanel en Silverlight.

C'est là que vous pourrez modifier l'orientation des éléments, si vous souhaitez qu'ils s'affichent de gauche à droite plutôt que de haut en bas.

Le niveau suivant est un style, l'ItemContainerStyle, qui contient un template. Ce style et ce template gèrent l'affichage d'un élément de la liste. C'est en quelque sorte la coque dans laquelle vont être affichées les données.

Les données en question, sont affichées via un DataTemplate, appelé ItemTemplate.

Le fond et la forme de chaque ligne sont donc bien séparés, puisque le fond est géré par l'ItemTemplate et la forme par le template contenu dans l'ItemContainerStyle... Vous suivez ?

Par conséquent, si vous voulez modifier la forme d'un item, et donc son état sélectionné, c'est dans le template de l'ItemContainerStyle qu'il vous faudra agir.

COLOURlovers : Des couleurs pour Blend

Sur COLOURlovers, vous pourrez trouver des motifs et des palettes de couleurs. La grande nouveauté c'est que lorsque vous consultez une palette de couleur, vous avez la possibilité de la sauvegarder dans plusieurs formats, via un panneau de téléchargement.

Pour la version Design, importez le fichier via le panneau nuanciers.

Pour la version WPF, c'est un dictionnaire de ressources que vous ajoutez à votre projet.

Pour la version XAML qui est plutôt destinée à Silverlight, copiez le contenu dans le fichier App.xaml de votre projet.

Arturo Toledo a mis en ligne un Tutoriel très complet sur l'utilisation de COLOURlovers et des fichiers téléchargés.

Expression Blend 2 - la doc en français est arrivée

Pour tous les francophones qui cherchent de la ressource sur Blend 2, rendez-vous sur le site Expression de Microsoft . Vous pourrez également y trouver la documentation pour les autres logiciels de la suite Expression Studio 2 : Design 2, Encoder 2, Media 2 et Web 2.

Pour une découverte guidée, 3 quickstarts ("démarrage rapide") sont disponibles : pour WPF, Silverlight 1.0 et Silverlight 2.0

Kuler s'incruste dans Blend et Design !

Faisons un point sur l'aspect "Nuancier" dans Blend et Design :

• Design permet la création de nuanciers, mais ne donne pas la possibilité de créer un fichier xaml de ressources couleurs utilisable directement dans Blend. Les nuanciers présents dans Design ne sont visibles et utilisables que dans Design.

• Blend permet la création de nuanciers, sous la forme d'un fichier xaml : un dictionnaire de ressources dans lequel les ressources couleurs sont référencées. Design ne peut pas lire l

Lorsqu'on parle de nuancier dans un projet WPF ou Silverlight, il faut donc utiliser le pluriel. Chaque outil gère les couleurs à sa façon, sans possibilité de les faire communiquer entre eux.

La couleur étant extrêmement importante et le nuancier un des outils de base qui permet de respecter une charte graphique, il parait évident qu'un outil de gestion des couleurs transverse serait le bienvenu au sein du duo Design / Blend.

Un début de réponse est apporté par Jonas Follesoe, qui met à disposition un add-in qui permet d'accéder à des palettes de couleurs via internet : Colorful.

C'est en fait la base de nuanciers (près de 134000) de la communauté Kuler qui s'incruste dans Blend et Design. Vous accédez donc aux mêmes palettes que vous soyez sur Blend ou Design, ce qui donne cette impression de transversalité.

Le concept est intéressant mais un peu limitatif : si vous n'avez pas accès à internet, vos palettes ne sont plus accessibles, et vous ne pouvez pas en créer de nouvelles.

Pour résumer, Colorful permet :

• D'avoir des panneaux dédiés intégrés aux interfaces de Blend et Design.

• D'accéder à un nombre non négligeable de nuanciers créés par la communauté kuler
• De faire une recherche par mot-clés parmi cette base de nuanciers.

Vous pouvez bien sûr créer votre propre nuancier sur le site de kuler pour pouvoir ensuite y accéder dans Blend et Design.

Il manque juste la possibilité de créer un nuancier personnalisé localemet directement à partir de Design ou Blend pour être autonome.

C'est donc un add-in qui peut s'avérer pratique, et qui pallie à une lacune du couple Design/Blend.

A vous de tester :)