Développeurs VS Interfaces

La réalisation des interfaces : une lourde responsabilité, sur laquelle repose souvent le succès du logiciel, du moins pour le grand public. Vous pouvez avoir les meilleurs algorithmes du monde, si l’interface de votre application n’allie pas l’esthétique à l’utilisabilité, il y a de grandes chances pour que l’utilisateur aille voir ailleurs. Il y a quelques années, quand je développais mes premières applications je réalisais généralement mes icônes moi-même ou j’en choisissais au hasard sur le net, je ne faisais pas de maquettes (au sens large) avant de commencer le développement. Le résultat en plus d’être affreux, se composait parfois d’éléments que je n’aurais pas pu utiliser si j’avais souhaité publier mes travaux (quelqu’un a parlé de licence ?).

Vous l’aurez compris, comme tout développeur, le design et la création d’interfaces ne sont pas mes compétences premières. Mais sur beaucoup de projets les développeurs sont amenés à travailler seuls sur ces aspects. Au fil des années j’ai découvert différents outils et ressources qui permettent à un développeur de réaliser quelque chose de potable et surtout d’éviter la catastrophe en l’absence d’une personne compétente sur ces domaines. Bien entendu cette liste est très loin d’être exhaustive alors n’hésitez pas à me faire découvrir de nouveaux éléments qui auraient leur place dans cet article.

Réaliser des maquettes

Bien que les phases de conception de l’interface soient bien plus complexe, la maquette est le premier élément qui permet de visualiser l’aspect d’une future application. Bien entendu il existe différents types de maquettes présentant des intérêts complémentaires (wireframes, maquettes d’intégration, …). Ce sujet est très vaste et je ne suis probablement pas le mieux placé pour en parler, en revanche, je peux vous présenter certains outils que j’utilise lors de cette étape.

Photoshop
Même si Adobe est en train d’adopter la démarche cloud, Photoshop reste l’arme ultime pour réaliser des maquettes. De nombreux templates, y compris ceux proposé par Microsoft pour les applications Windows sont délivrés au format .psd. Photoshop présente tout de même deux inconvénients : le temps de prise en main et le prix, ce qui peut être rédhibitoire dans beaucoup de cas, même si Photoshop peut servir à bien plus que réaliser de simples maquettes.

Gimp
Heureusement il existe d’autres solutions qui fonctionnent tout aussi bien et lorsqu’on cherche un équivalent gratuit à Photoshop, beaucoup pensent à Gimp. Personnellement, je n’ai jamais réussi à accrocher avec ce logiciel, je n’en ferais donc pas de grandes lignes d’élloges bien qu’il permette amplement d’effectuer le travail nécessaire.

Paint.NET
Paint.NET est un outil gratuit que j’apprécie énormement. Certes il n’est pas aussi poussé que Photoshop ou Gimp, mais dans la majorité des cas il sera suffisant et sa prise en main est très rapide. Avec son système de calques et ses fonctionnalités de retouche simples à mettre en oeuvre, Paint.NET est un outil tout indiqué pour les développeurs et même pour le grand public.

PowerPoint
Maintenant que nous avons enfoncé les portes ouvertes en citant les classiques, attardons-nous sur des outils moins traditionnels mais tout aussi efficaces. Si vous disposez de PowerPoint 2007 ou ultérieur ainsi que de Visual Studio Premium 2013, Ultimate 2013 ou Test Professional 2013, vous pourrez bénéficier de l’outil de « Création de plan conceptuel ». Celui-ci se présente sous la forme d’un onglet supplémentaire dans PowerPoint et vous permet de schématiser très rapidement une interface en mettant à disposant une bibliothèque d’éléments relativement complète.

Outil de Création de plan conceptuel de PowerPoint

Balsamiq
J’ai beaucoup utilisé Balsamiq (aussi appelé Balsamiq Mockup) par le passé, quand il était gratuit (mais en bêta il me semble). La société Balsamiq Studios qui commercialise Balsamiq propose maintenant deux versions de cet outil : la première en application desktop, la second sur le cloud. A l’heure où j’écris ces lignes leurs tarifs ne sont pas exorbitants donc la solution mérite qu’on s’y intéresse.

Cacoo
L’outil cloud que je préfère reste Cacoo, même si l’ergonomie et la fluidité ne font pas vraiment partie des points forts de cet outil, il reste simple à prendre en main. Nulab, son éditeur, propose plusieurs formules dont les tarifications restent raisonnables et surtout une offre gratuite avec quelques fonctionnalités bridées, mais qui n’empêche en rien d’utiliser cet outil pour les petits projets.

Cacoo

Créer une palette de couleurs

Pour créer une interface, il ne suffit pas de réaliser des croquis noir et blanc, avoir un ensemble de couleurs harmonieuses sur les maquettes (comme sur le produit final) est tout aussi important. Mais quand on ne dispose pas d’une fibre artistique très développée, mieux vaut se faire aider par des outils.

Kuler
Kuler commence à être connu, je rencontre régulière des personnes qui utilisent cet outil en ligne proposé gratuitement par Adobe. Les utilisateurs ont la possibilité de créer ou de rechercher des palettes de couleurs, de les adapter à leur convenance en jouant sur différents paramètres. On y trouve des palettes de 5 couleurs, ce qui correspond aux recommandations habituelles en matière de création d’interface.

Kuler

La boite à couleur
Egalement très populaire, cette petite application permet de récupérer n’importe quelle couleur intéressante présente sur votre écran, plutôt pratique pour ceux qui souhaitent travailler avec précision.

Colour Code
Colour Code se rapproche beaucoup de Kuler, il très bien pensé et permet également de partager vos palettes de couleurs avec un permalien. Seule ombre au tableau il semble qu’il n’y ai pas de galerie pour visualiser les réalisations des autres utilisateurs.

Hex Color Tool
Un autre outil que je souhaitais vous présenter est Hex Color Tool, à partir d’une couleur de base, celui-ci peut vous proposer des déclinaisons plus claires ou plus sombres. Grâce à cet outil en ligne plus de problème pour créer les ombres ou matérialiser les interactions des éléments cliquables.

Ajouter des icônes

Les maquettes et les couleurs ne sont pas les points les plus délicats, le grand ennemi du développeur est l’icône. Lorsqu’une personne avec une dominante technique commence à se pencher sur un domaine où un certain sens artistique est nécessaire, on court souvent à la catastrophe (même si certaines personnes arrivent à combiner les deux avec brio). Heureusement il existe des solutions que les développeurs pourront mettre en place sans trop risquer de dénaturer l’interface de leur application.

Bootstrap
Bootstrap est le Framework CSS et JS mis au point pas Twitter, il propose donc tout un ensemble d’éléments permettant de construire très rapidement une interface web. Parmi ces éléments on trouve un set de glyphicons (gratuites quand elles sont utilisées avec Bootstrap). Ces icônes sont en réalité une police de caractères, ce qui présente deux avantages : l’aspect vectoriel et la légèreté (réduction du temps de chargement). J’en profite d’ailleurs pour faire une petite parenthèse dév’ car certains d’entre vous préférerons peut être utiliser Bootstrap par l’intermédiaire d’Initializr qui permet d’y ajouter quelques éléments pratiques (Modernizr, avertissement pour les anciens navigateurs, robots.txt, …).

Font Awesome
Font Awesome est un excellent complément aux glyphicons de Bootstrap si ces dernières ne vous suffisent pas. Cette police d’icônes fonctionne exactement sur le même principe que celle de Bootstrap. De plus Font Awesome est disponible par CDN ce qui permet d’améliorer encore un peu plus les performances (étant donné que la police de caractères restera en cache pour l’ensemble des sites qui utilisent le CDN).

Iconmoon
Iconmoon propose également des packs d’icônes reposant sur une police de caractères. Attention tout de même : le pack de base avec 450 icônes est gratuit, mais les packs plus étoffés sont payants. Il en va de même si vous souhaitez qu’Iconmoon héberge vos icônes.

Fontello
Fontello vous permet de combiner les icônes de différents sets présent sur internet. Vous disposerez ainsi d’une police de caractère qui comporte juste les éléments dont vous avez besoin (ce qui allège également le poids des fichiers et le temps de chargement). En bonus Fontello vous propose de personnaliser les noms et les codes associés à chacune des icônes, plutôt pratique pour être familier avec son set d’icônes.

Fontastic
Fontastic propose des fonctionnalités similaires à celles de Fontello, mais permet également de télécharger les icônes au format .svg pour ceux qui souhaiteraient les retravailler facilement avec Inkscape par exemple.

Iconmonstr
Les outils précédents sont plutôt orientés web, même si ils pourraient également être utilisés dans une application classique. Iconmonstr propose simplement des sets d’icônes gratuits au format .svg et .png avec la possibilité de personnaliser les tailles et les couleurs.

Metro Studio
Une fois n’est pas coutume, Metro Studio est un client lourd proposant plus de 2500 icônes dans le style Modern UI. Cette application permet de créer des packs à partir des icônes fournies par l’éditeur ou en les important à partir de polices de caractères installées sur votre ordinateur. Il est ensuite possible de voir le code XAML correspondant à chaque icône et d’exporter les packs en tant que sprites ou ResourceDictionary.

Metro Studio

Icon Finder
Si vous ne trouvez pas votre bonheur parmi toutes les ressources présentées ci-dessus, vous pouvez opter pour le moteur de recherche Icon Finder et générer vous-même vos sprites grâce à Stitches.

J’espère que cet article vous aura fait découvrir quelques outils utiles, si jamais vous connaissez d’autres ressources intéressantes, n’hésitez pas à m’en parler !

Facebooktwitterlinkedinmail

Visual Studio 2013 – Chapitre 2 – La liste des tâches

Bien que la liste des tâches ne soit pas le composant principal de Visual Studio, il me paraissait intéressant de l’aborder brièvement car elle peut se révéler très utile pour ne pas oublier de vérifier certains points laissés de côté au cours d’un long projet avant de réaliser une mise en production par exemple. Sur Visual Studio 2013, la liste de tâches est accessible par l’intermédiaire du menu « Affichage » >> « Liste de tâches » ou plus simplement grâce au raccourci clavier [Ctrl]+[*],[T].

Liste des tâches utilisateur sur Visual Studio 2013

A partir de la liste déroulante encadrée en orange sur la capture d’écran précédent, il est possible de choisir entre « Tâches utilisateur » qui permet d’afficher l’ensemble des tâches saisies manuellement (par le biais du bouton encadré en rouge) et « Commentaires » qui affiche l’ensemble des tâches contenues dans les commentaires. Et c’est probablement ce deuxième point qui est le plus intéressant ! En effet, si Visual Studio reconnait de base quatre types de commentaires spéciaux (TODO, UNDONE, HACK et le particulier UnresolvedMergeConflict), il est possible d’en ajouter en passant par le menu « Outils » >> « Options » >> « Environnement » >> « Liste de tâches » comme le montre l’image ci-dessous :

Ajout d'un jeton de tâche sur Visual Studio 2013

Le nouveau type de tâche associé aux commentaires est ensuite utilisable comme le montre les zone encadrées en orange dans la capture d’écran ci-dessous.

Association des commentaires et des tâches sur Visual Studio 2013

En bonus si vous avez ReSharper, une coloration syntaxique de ces tâches associées aux commentaires est proposé comme le montre les zones encadrées en orange dans l’image ci-dessus. Par défaut ReSharper color les mots clés TODO, BUG et NotImplementedException, il y a donc une petit différence avec les éléments natifs de Visual Studio (en C#), mais là encore il est possible de personnaliser les éléments proposés et d’en ajouter (menu « ReSharper » >> « Options » >> « Tools » >> « To-do items »).

To-do Explorer sur Visual Studio 2013 avec ReSharper

ReShaper propose sa propre liste de tâches appelée To-do Explorer et accessible via le menu « ReSharper » >> « Tools » >> « To-do items » (en violet ci-dessus). La couleur et les icônes visibles pour chacun des types de tâches sont paramétrables dans les options de ReSharper par le cheminement présenté précédemment. La coloration syntaxique des commentaires évoqué auparavant doit en revanche être configurée dans le menu « Outils » >> « Options » >> « Environnement » >> « Polices et couleurs » >> « ReSharper todo item »

Pour plus d’informations :
MSDN – Utilisation de la liste des tâches
JetBrains – To-do Explorer
JetBrains – Using To-do Lists

Facebooktwitterlinkedinmail

Visual Studio 2013 – Chapitre 1 – Les extensions

Dans sa version la plus complète, Visual Studio 2013 propose un grand nombre de fonctionnalités de la simple coloration syntaxique à l’IntelliSense en passant par l’ALM. Mais il est toujours possible de faire mieux et c’est à ça que servent les extensions ! En voici une petite sélection que j’utilise quotidiennement :

ReSharper (alias R#)
Qui ne connait pas cette célèbre extension ? ReSharper est un outil certes payant, mais qui étend considérablement les fonctionnalités de Visual Studio, son objectif étant d’accroître la productivité du développeur d’après son éditeur Jet Brains, mais je vous laisse juger par vous même !

StyleCop
StyleCop est une extension gratuite qui permet d’améliorer la lisibilité et la clarté du code, elle signale tout manquement aux règles d’usage (retour à la ligne manquant ou en surnombre, disposition des éléments dans les classes, …). En plus StyleCop est compatible avec ReSharper !

GhostDoc & SandCastle
GhostDoc est une extension qui permet de générer automatiquement les commentaires de documentation dans le code. Les commentaires sont pré-remplis avec certaines informations et le développeur n’a plus qu’à préciser les points particuliers. La version de base est gratuite et il existe une version payante qui propose des fonctionnalités supplémentaires. Si vous souhaitez publier la documentation dans un format intelligible et non pas en XML brut, le légendaire SandCastle fera très bien l’affaire en version standalone ou intégré à Visual Studio.

CodeMaid
Que ce soit en supplément ou à la place de certaines extensions citées précédemment, certains d’entre vous seront probablement intéressé par CodeMaid dont l’objectif est de nettoyer votre code de ses impuretés et cela gratuitement !

Indent Guides
On termine ce chapitre avec une extension gratuite relativement simple mais dont la fonction est salvatrice pour les gros fichiers de code. Il s’agît de Indent Guides qui viendra placer des lignes verticales correspondant aux couples d’accolades, avec cette extension, plus possible de place du code au mauvais endroit !

J’espère que vous apprécierez ces extensions, n’hésitez pas à commenter ce post en partageant celles que vous utilisez.

Facebooktwitterlinkedinmail

Les fonctions parent() et parents() de jQuery

En JavaScript, les possibilités de manipulation des contenus et des styles d’une page HTML sont quasiment infinies. En ajoutant un peu de jQuery, la tâche devient beaucoup plus aisée. Bien que la documentation de jQuery soit très complète et propose des exemples concrets, il m’arrive régulièrement de m’interroger sur le comportement de certaines fonctions dans des cas très particuliers. Aujourd’hui, je me suis amusé avec les fonctions parent() et parents(), je vous partage donc cette petite expérimentation :

Voir la démo – Fonctions parent() et parents() de jQuery

Extrait du code HTML :

<div class="level1 impact">
	Div level 1 (impact)
	<div class="level2">
		Div level 2
		<div class="level3 impact">
			Div level 3 (impact)
			<div class="level4" id="last-tag">
				Div level 4
			</div>
		</div>
	</div>
</div>

Extrait du code JavaScript :

// CAS n°1
// En partant de la balise portant l'id "last-tag"
// pour tous les parents portant la classe "impact"
// fixer la hauteur maximale des blocs à 10px (propriété non-héritée)
$("#last-tag").parents(".impact").css("height", "10px"); // Effet sur la balise sélectionnée uniquement

// CAS n°2
// En partant de la balise portant l'id "last-tag"
// pour tous les parents portant la classe "impact"
// fixer la largeur des blocs à 50% (propriété héritée)
$("#last-tag").parents(".impact").css("width", "50%"); // Effet sur la balise sélectionnée et ses enfants		

// CAS n°3
// En partant de la balise portant l'id "last-tag"
// si le premier parent porte la classe "level2"
// changer la couleur de fond en bleu (propriété non-héritée)
$("#last-tag").parent(".level2").css("background", "blue"); // Aucun effet (#last-tag n'a pas de parent direct .level2)

// CAS n°4
// En partant de la balise portant l'id "last-tag"
// pour le premier parent portant la classe "impact"
// changer la couleur de la bordure en vert (propriété non-héritée)
$("#last-tag").parents(".impact").first().css("border-color", "green"); // Effet sur la balise sélectionnée uniquement

// CAS n°4 BIS
// L'utilisation de closest() à la place de parents().first() produit un comportement similaire
// attention tout de même car closest() part de la balise courante, tandis que parents() part de balise parente
 $("#last-tag").closest(".impact").css("border-color", "green");

Pour le cas n°1, on cherche l’ensemble des parents portant la classe impact et on fixe leur hauteur à 10px. Etant donné que la propriété de hauteur n’est pas héritée par défaut, seuls les blocs level1 et level3 qui portent la classe impact sont affectés. Pour le cas n°2, on réalise la même opération, mais sur une propriété héritable (la largeur), l’ensemble des blocs sous-jacents au bloc impacté de plus haut niveau sont donc affecté. Ici le bloc de plus haut niveau impacté est le level1, ce sont donc tous les blocs qui seront réduit à la moitié de la largeur de leur parent.

Dans la cas n°3, la fonction cherche un parent direct portant la classe level2, comme aucun le parent direct ne rempli pas ce critère, aucune action n’est effectuée. Pour les cas n°4 et 4 bis, on cherche à impacter uniquement le premier parent correspondant au critère de sélection. Attention tout de même, car il existe une différence subtile entre l’utilisation de closest() et parents() : la première fonction partira de l’élément courant, tandis que la deuxième partira de l’élément parent.

Télécharger le fichier source – jquery-parent-parents.html

Vous pouvez retrouver toutes les fonctions de parcours du DOM sur le site de jQuery

Facebooktwitterlinkedinmail

Appréhender LINQ

LINQ pour Language INtegrated Query est un composant du Framework .NET qui permet de requêter à peu prêt tout et n’importe quoi (Objet, XML, Base de données, Entité, …), mais pas toujours évident de s’y retrouver. Alors par où commencer ? Comme toute techno Microsoft qui se respecte, LINQ dispose d’un Getting Started pour C# (ou pour VB) sur le MSDN et les fonctionnalités proposées bénéficient du support de l’IntelliSense dans Visual Studio.

Mais pourquoi LINQ est-il tellement intéressant ? Prenons un petit exemple à travers une simple application console en C# :

public class Etudiant
{
    public string Prenom { get; set; }
    public string Nom { get; set; }
    public List<int> Notes { get; set; }
}

public class Program
{
    static void Main(string[] args)
    {
        // Création de la liste d'étudiants
        var etudiants = new List<Etudiant> {
            new Etudiant {Prenom="Mike", Nom="DOE", Notes=new List {20, 10, 15}},
            new Etudiant {Prenom="Albert", Nom="DURAND", Notes=new List {11, 3, 8}},
            new Etudiant {Prenom="Hans", Nom="MULLER", Notes=new List {11, 13, 15}},
            new Etudiant {Prenom="Juan", Nom="FERNANDEZ", Notes=new List {14, 12, 16}}
        };

        Console.WriteLine("Parcours de la liste telle qu'elle a été créée");
        // Parcours de la liste telle qu'elle a été créée
        foreach (var etudiant in etudiants)
        {
            Console.WriteLine(etudiant.Prenom + " " + etudiant.Nom);
        }

        // Requête LINQ renvoyant la liste des étudiants qui ont une moyenne supérieure ou égale à 10 en les classant par ordre alphabétique
        var requeteLinq = from e in etudiants orderby e.Prenom where e.Notes.Average() >= 10 select new { e, Moyenne = e.Notes.Average() };

        Console.WriteLine();
        Console.WriteLine("Parcours de la liste issue de la requête LINQ");
        // Parcours de la liste issue de la requête LINQ
        foreach (var resultat in requeteLinq.ToList())
        {
            Console.WriteLine(resultat.e.Prenom + " " + resultat.e.Nom + " a " + resultat.Moyenne + " de moyenne.");
        }

        Console.Read();
    }
}

Dans l’extrait de code ci-dessus, la requête LINQ à la ligne 29, nous permet de récupérer les étudiants qui ont une moyenne supérieure ou égale à 10 en les classant par ordre alphabétique (d’après leur prénom) et tout cela en une seule ligne. Bien entendu LINQ dispose de beaucoup d’autres fonctionnalités, et quelque soit votre source de données, vous pourrez la requêter de la même manière.

Télécharger la Solution pour Visual Studio 2013 – TestLinq.zip

Avant de vous laisser vous aventurer dans les profondeurs du code pour découvrir plus en détails les possibilités de LINQ, j’aimerais vous présenter deux logiciels qui pourront vous être utiles. Le premier d’entre eux est LINQPad, cet outil permet de requêter directement une source de données en LINQ. Une fois vos connexions ajoutées (en rouge), vous pouvez sélectionner celle de votre choix (en bleu), puis saisir votre requête LINQ (en jaune) avant de l’exécuter (en vert). Les résultats apparaissent alors dans partie basse (en violet) et il est par exemple possible de voir le code SQL généré (en orange).

LINQPad

Si comme moi, vous êtes plus familier avec SQL qu’avec LINQ, Linqer devrait vous plaire. Il s’agît d’un outil permettant de traduire vos requêtes SQL en LINQ. Il est malheureusement payant, mais les 20 jours proposés gratuitement par la version d’essai devraient être suffisant pour découvrir LINQ. Sur Linqer nous retrouvons l’ajout des connexions (en rouge) et le choix de la connexion courante (en bleu), la zone de saisie pour la requête SQL (en jaune), sa commande d’exécution (en vert) et celle de traduction (en orange). La zone de résultat est elle aussi dans la partie basse (en violet).

Linqer

J’espère que ce premier article un peu plus orienté technique vous a plu, n’hésitez pas à commenter, à donner votre avis ou des vos idées pour de prochains articles.

Facebooktwitterlinkedinmail

Un strasbourgeois à Paris

Microsoft France

Lorsqu’on décide de transformer sa passion pour l’informatique en métier, on pense inévitablement aux grands noms qui ont marqué la courte histoire de ce domaine. Il y a quelques mois je n’aurais jamais imaginé travailler chez un géant du secteur, pourtant depuis quelques jours j’ai la chance d’être en stage au sein de la Division Services de Microsoft France.

Depuis le 31 Mars, je travaille donc avec l’équipe de Ressource Management (RM) de Microsoft Consulting Services (MCS) sur l’élaboration d’un outil qui permettra de gérer les compétences, les expériences et les missions des consultants et partenaires de l’entité. L’équipe extraordinaire et le cadre de travail est tout simplement génial (hé oui Microsoft chouchoute ses employés mais aussi ses stagiaires !), j’ai déjà rencontré énormément de personnes et découvert beaucoup de choses en quelques jours.

Je travaille actuellement sur le développement d’une application ASP.NET MVC 5 accompagné d’Entity Framework 6 et cette combinaison forme un duo magique pour le développement web. J’étais toujours un peu frileux concernant les technos web de Microsoft, mais je dois bien avouer que j’ai totalement changé d’avis.

J’espère que je ne suis pas au bout de mes surprises !

Facebooktwitterlinkedinmail

Le début d’une histoire – TechDays 2014

Quoi de mieux que les TechDays pour commencer un blog ?

J’ai eu la chance de pouvoir m’absenter pendant une journée avec quelques camarades de promo pour assister à cet événement sensationnel ! Voici donc le récit détaillé minute par minute de mon périple du mardi 11 février 2014 au Palais des congrès de Paris…

Badge d'accès aux Microsoft TechDays 2014

  • 06h16 : Départ Gare de Strasbourg
  • 08h38 : Arrivée Gare de l’Est à Paris
  • 09h10 : Déjà en retard pour la plénière
  • 10h55 : Fin de la plénière « Votre futur est dans le code »
  • 11h00 : Session « Introduction au développement Windows 8.1 »
  • 12h15 : Session « Azure : que puis-je faire pour 0€, 1€, 100€, 1000000€ et au-delà ? »
  • 13h00 : Echanges avec des professionnels présents à l’événement
  • 13h45 : Direction McDo’ pour un repas entre amis
  • 15h20 : Retour au salon et petite tournée des stands en attendant la session suivante
  • 16h20 : Catastrophe, la session « Mode offline et Synchronisation avec Windows Phone et Windows 8.1 » est pleine !
  • 16h21 : Nouveau tour de salon et arrêt au Starbucks du RDC pour patienter
  • 17h30 : Session « Techniques d’UX & UI Design »
  • 19h10 : Metro direction Gare de l’Est
  • 20h25 : Retour vers Strasbourg en TGV

Plus d’infos : www.microsoft.com/france/mstechdays

Facebooktwitterlinkedinmail