Bourse en design pour Marc-Olivier

Par Louis-Philippe Baril, vendredi 14 mai 2010 13:26
Catégorie : Intégration / design

Bravo à Marc-Olivier Noël, designer chez Nmedia, qui a récemment obtenu la bourse «Lubie Vision» du CEGEP de Sherbrooke. Cette distinction est décernée à l'étudiant qui a présenté le meilleur portfolio web dans le cadre du DEC en graphisme en fonction des critères suivants : design, originalité, complexité de la programmation et la qualité des projets présentés dans le portfolio. Dans le cas de Marc-Olivier, le projet a été programmé en ActionScript 3 avec une base de données en XML. Pour voir la réalisation : http://monoel.dioxy.net/.

Bill Buxton et le design logiciel.

Par Patrick Bélanger, lundi 12 avril 2010 14:10
Catégorie : Programmation  |  Intégration / design

 

Comment livrer du logiciel de qualité… Bien certainement, il faut des programmeurs de qualité et avoir le souci de pleins de détails techniques… Quelle plateforme, quels langages, quels choix architecturaux, quels standards, quels protocoles, … Mais ce n’est pas tout.

 

Un aspect trop méconnu, c’est l’importance du design. Et non seulement les pixels qui seront affichés à l’écran, mais aussi comment sera utilisée l’application, par qui, quelles seront leurs préoccupations… et leur background ? Comment faire en sorte que l’information recherchée soit facile à retrouver. Comment mettre à profit tout ce qu’ils sont comme utilisateurs pour leur donner une forte résonnance dans la solution offerte.

 

C’est là que le design entre en jeux. C’est pour l’instant un mélange de quelques professions : designer à la sauce infographe, architecte d’information, ergonome d’applications…

 

Un bon penseur dans le sujet, est Monsieur Bill Buxton.

Bill Buxton

Voici un petit compte-rendu de deux Web Cast le mettant en vedette :

 

 

  • Comparaison avec un projet de construction novateur (prenons l’exemple du Seattle Central Library)
    • Pour Bill Buxton, l’architecture de bâtiments s’apparente plus au design du fonctionnel et de l’architecture d’information qu’à l’architecture logicielle;
    • Il fait le parallèle entre architecte logiciel et ingénieur du bâtiment;
    • La portion architecture sur le budget total du projet est de 17 à 25%;
    • Design commence avec l’appel d’offre et continu jusqu’à la complétude (livraison) du projet.
  • Comparaison des méthodologies :
    • Programmation est issue des mathématiques ou de l’ingénierie :
      On cherche à trouver LA réponse;
    • Design :
      On cherche la vision, donc pas une réponse monolithique et absolue. Le designer va chercher à trouver plusieurs approches très différentes, les présenter, non pour trouver la bonne du premier coup, mais pour faire discuter sur chaque différence. C’est une façon de dessiner le terrain (en bon programmeur, on emploierait le « solution space ») et d’amener tout le monde à en discuter, à faire émerger le chemin à marcher sur ce terrain.
  • Approche agile pour le design?
    • Potentiellement contre intuitive et contre productive à la base, plus à l’aise waterfall, mais pas impossible d’être agile.
  • Comment réussir avec notre équipe de design ?
    • Si on cherche à livrer du logiciel qui sera innovateur dans 2 ans, alors il faut une machine à la fine pointe de la technologie. La loi de Moore continue de fonctionner. On le savait de l’aspect programmation, là l’input sur le volet design est pareil.
    • Le domaine du design informatique ressemble au design industriel de 1920. Il manque présentement les écoles, les maîtres à penser, les champions…;
    • Alors pour avoir un bon département de design, il faut faire comme avec un CFO : engager un bon designer et lui laisser le champ libre pour recruter ce qu’il reconnaît comme un bon designer.
  • Bons livres
  • Pistes de réflexion…
  • Simplification des rôles dans l’équipe :
    • Designer : chercheur et porteur de vision;
    • Programmeur : prend une vision et l’implémente;
    • Business : s’assure du cadre financier pour que la vision implémentée puisse se livrer et se supporter par la suite.
  • Mes conclusions :

Besoin de main-d'oeuvre!

Par Mélissa Lajoie, jeudi 25 mars 2010 10:39
Catégorie : N’quotidien  |  Intégration / design

Nmedia est à la recherche d'intégrateurs Web. Si cet emploi vous intéresse, vous pouvez poser votre candidature à cette adresse:

emploi@nmediasolutions.com

Merci!

Journée mondiale de l’utilisabilité 2009

Par Karine Samson, jeudi 12 novembre 2009 16:56
Catégorie : Intégration / design

Aujourd’hui, une quarantaine de pays dont le Canada et le Québec  fêtent la Journée mondiale de l’utilisabilité sous le thème « l’utilisabilité pour un monde durable ».

L’utilisabilité, même mon correcteur orthographique ne connaît pas ce mot, alors pas de panique! L’utilisabilité appliquée au Web c’est entre autres de rendre un site Internet ou une application Web :

  • Utile – Qu’il réponde à un besoin réel, exprimé ou non.
  • Efficace et efficient – Qu’il permette d’atteindre l’objectif d’utilisation rapidement et avec le moindre effort.
  • Satisfaisant – Que l’utilisateur y assouvisse son besoin sans rencontrer de frustration, donc dans la joie!

En termes concrets il s’agit de tirer le meilleur parti des différentes contraintes telles que les standards d’ergonomie (balayage de la page, contraste des couleurs, appel au vécu) et d’accessibilité Web (séparation du balisage HTML/CSS, alternatives textuelles aux images), de prendre en compte le contexte d’utilisation (sur dispositif portable, sur connexion basse-vitesse) et l’utilisateur (fréquence d’utilisation, maîtrise des outils informatiques.)

Pénétration de Silverlight

Par Patrick Bélanger, lundi 19 octobre 2009 14:25
Catégorie : Intégration / design  |  Programmation

Quelques données sur l’adoption de Silverlight…

 

Dans les chiffres, on évalue présentement qu’il y a plus d’un ordinateur sur quatre connecté à Internet qui possède le plugin.

 

Pour notre part, nous utilisons Silverlight dans plusieurs projets, dont celui d’Original Boutik. Le site utilise Silverlight pour proposer un environnement de création de produit vestimentaire et autres accessoires… et nous continuons les développements !

Silverlight : Remplissage de formes dans une image bitmap

Par Patrick Bélanger, vendredi 31 juillet 2009 22:18
Catégorie : Intégration / design  |  Programmation

Silverlight 3 nous permet maintenant de contrôler une image bitmap pixel par pixel.

 

Ainsi, nous avons cherché à écrire un algorithme de colorisation de région par remplissage (flood fill algorithm). Nos premières approches qui empruntaient à d’autres algorithmes du domaine de l’infographie n’ont pas été concluante. Bien que l’algorithme était rapide et précis, dans certains cas nous dépassions la pile d’appel (call stack) et des exceptions survenais.

 

Mais lorsque nous avons tenté d’implémenter par la technique de la queue, nous avons trouvé la solution !

 

La méthode principale à utiliser est celle-ci :

private void ColorizeRegion(WriteableBitmap bmp, int originalX, int originalY, Color newColor, bool antiAliasing, int threshold)
{
  Color oldColor = GetColorFromPixel(bmp, originalX, originalY);
  int rgb = GetRgbFromColor(newColor);
 
  int width = bmp.PixelWidth;
  int height = bmp.PixelHeight;
 
  // Set Q to the empty queue.
  Queue<PointI> q = new Queue<PointI>(2048);
 
  // Add starting node to Q.
  q.Enqueue(new PointI(originalX, originalY));
 
  // For each element n of Q:
  while (q.Count > 0)
  {
    PointI n = q.Dequeue();
 
    // If the color of n is equal to target-color
    if (IsSimilarColor(GetColorFromPixel(bmp, n.X, n.Y), oldColor, threshold))
    {
      // Set startX and endX equal to n
      int startX = n.X;
      int endX = n.X;
 
      // Move startX to the left until the color of the node to the left of startX no longer matches the old color.
      while (startX > 0 && IsSimilarColor(GetColorFromRgb(GetRgbFromPixel(bmp, startX - 1, n.Y)), oldColor, threshold))
      {
        --startX;
      }
 
      // Move endX to the right until the color of the node to the right of endX no longer matches the old color.
      while (endX < width - 1 && IsSimilarColor(GetColorFromRgb(GetRgbFromPixel(bmp, endX + 1, n.Y)), oldColor, threshold))
      {
        ++endX;
      }
 
      if (antiAliasing)
      {
        // Anti-aliasing is performed on the edges (left, right) of the current line
        if (startX - 1 >= 0)
        {
          Blend(bmp, startX - 1, n.Y, newColor);
        }
        if (endX + 1 < width)
        {
          Blend(bmp, endX + 1, n.Y, newColor);
        }
      }
 
      // For each node between startX and endX
      for (int x = startX; x <= endX; ++x)
      {
        // Set the color of nodes between w and e to replacement-color
        SetPixelRgb(bmp, x, n.Y, rgb);
 
        // If the color of the upper node of n is an old color, add that node to Q
        if (n.Y > 0 && IsSimilarColor(GetColorFromRgb(GetRgbFromPixel(bmp, x, n.Y - 1)), oldColor, threshold))
        {
          q.Enqueue(new PointI(x, n.Y - 1));
        }
        else
        {
          if (antiAliasing && n.Y - 1 >= 0)
          {
            // Anti-aliasing is performed on the line up of the current one if we are on a frontier one
            Blend(bmp, x, n.Y - 1, newColor);
          }
        }
 
        // If the color of the lower node of n is an old color, add that node to Q
        if (n.Y < height - 1 && IsSimilarColor(GetColorFromRgb(GetRgbFromPixel(bmp, x, n.Y + 1)), oldColor, threshold))
        {
          q.Enqueue(new PointI(x, n.Y + 1));
        }
        else
        {
          if (antiAliasing && n.Y + 1 < height)
          {
            // Anti-aliasing is performed on the line down of the current one if we are on a frontier one
            Blend(bmp, x, n.Y + 1, newColor);
          }
        }
      }
    }
  }
}

 

Et le résultat ressemble à ceci (cliquer dans la section de droit).

Impressionnant ce que Silverlight nous donne comme liberté. Et nous avons déjà trouvé plusieurs applications à cette petite librairie !

 

Alors pour votre plaisir, voici les sources :

Nouvel outil: SuperPreview

Par Patrick Bélanger, jeudi 19 mars 2009 11:01
Catégorie : Programmation  |  Intégration / design

Pour tester nos sites Web avec plusieurs browser…

Bye bye les Machines Virtuelles, bienvenu Expression Web SuperPreview !

Regardez ces liens :

http://blogs.msdn.com/xweb/archive/2009/03/18/Microsoft-Expression-Web-SuperPreview-for-Windows-Internet-Explorer.aspx

http://blogs.msdn.com/xweb/archive/2009/03/18/Microsoft-Expression-Web-SuperPreview-for-Windows-Internet-Explorer.aspx

http://expression.microsoft.com/en-us/dd565874.aspx

 

Intéressant !