Concevoir : Mockup ? Kesako ?

En informatique, le terme mock-up (qui vient du même mot anglais qui signifie une maquette à l'échelle 1:1) désigne un prototype d'interface utilisateur. Un mock-up a ainsi pour rôle de présenter les idées sur l'utilisation d'un logiciel. (Wikipedia)

Sur ce site vous trouverez une sélection de 18 outils gratuits de création d’interfaces graphiques (et de schémas) pour vos projets. L'auteur donne son impression pour chaque outil testé.

Le mockups qui sort du lot est : Mockflow qui est une application, online ou en application, via une interface Adobe Air, qui permet de maquetter des applications avec différent rendus tel que :

• Facebook
• iPhone
• iPad
• Android

Concevoir : eZ publish sera notre CMS PHP de prédilection !

Suite à une étude réalisé en juillet 2010 (« HARDIS - e-Solutions - Veille - Choix d'une solution CMS Open Source.pdf »), nous avions sélectionné deux CMS (un PHP et un Java) qui répondaient à nos attentes pour un système de gestion de contenu performant et robuste.

eZ publish nous semble être une bonne solution dans un environnement PHP car :

·         il permet une gestion multi-site simple et claire.

·         il propose un nombre important de fonctionnalités en natif. Cela permet de s’affranchir de la tâche fastidieuse d’installation et de paramétrage des plugins et assure lors des montées de version une plus grande robustesse.

·         il possède une interface d’administration conviviale, dissociée de la partie FrontOffice et présente le site sous forme arborescence ce qui permet une navigation rapide.

·         malgré une communauté moins importante, la qualité et la réactivité des développements est très bonne. Le business model de la société eZ n’y est surement pas étranger.

eZpublish est aujourd'hui une solution CMS très aboutie. C'est ce que l'on peut appeler une solution "professionnelle", en comparaison avec d'autres types de CMS, à visée plus communautaire.

Pour Logi-Tech Informatique (Groupe HARDIS), eZ publish est un outil pérenne, avec une adaptabilité extraordinaire aux besoins spécifiques, grâce à une architecture ouverte 100% objet, basée sur le modèle MVC.

Manager : SCRUM au quotidien... en vidéo !

Voici une vidéo simple et bien pensée présentant l'application de SCRUM pour la réalisation d'un portail. Le projet a duré 6 mois et débouché sur 2 Portails.

Scrum in the real world, an AGILE movie from Soul' on Vimeo.

Elle présente rapidement l'essentiel :

• les outils
• les étapes
• les visuels

Bref, à regarder et à re-regarder ;)

Manager : Peut-on être Agile chez Logi-Tech Informatique ?

Je dirais : "On peut être Agile mais pas avec n'importe qui !"


Bien que l'Agilité ait plus de 10 ans, elle n'est pas connue de beaucoup d'acteurs surtout en France. Mettre en place une organisation permettant de répondre, par exemple, aux exigences de l'Extreme Programming n'est pas une chose aisée... L'implication nécessaire pour le client n'est pas dans les habitudes de nos comptes...

...et imposer des cycles de quelques semaines provoquerait un chamboulement proche du tsunami dans l'organisation et la façon de travailler de nos clients !


Alors on laisse tomber ? Non, on tempère... La meilleure organisation est celle partagée par tous (client et fournisseur !).
Ce dont je suis persuadé c'est que les principes portés par le manifeste Agile* sont de bons sens et doivent être connus de tous :

•  « Notre plus haute priorité est de satisfaire le client en livrant rapidement et régulièrement des fonctionnalités à grande valeur ajoutée. »
•  « Accueillez positivement les changements de besoins, même tard dans le projet. Les processus Agiles exploitent le changement pour donner un avantage compétitif au client. »
•  « Livrez fréquemment un logiciel opérationnel avec des cycles de quelques semaines à quelques mois et une préférence pour les plus courts. »
• « Les utilisateurs ou leurs représentants et les développeurs doivent travailler ensemble quotidiennement tout au long du projet. »
• « Réalisez les projets avec des personnes motivées. Fournissez-leur l’environnement et le soutien dont ils ont besoin et faites-leur confiance pour atteindre les objectifs fixés. »
• « La méthode la plus simple et la plus efficace pour transmettre de l’information à l'équipe de développement et à l’intérieur de celle-ci est le dialogue en face à face. »
•  « Un logiciel opérationnel est la principale mesure d’avancement. »
• « Les processus Agiles encouragent un rythme de développement soutenable. Ensemble, les commanditaires, les développeurs et les utilisateurs devraient être capables de maintenir indéfiniment un rythme constant. »
•  « Une attention continue à l'excellence technique et à une bonne conception renforce l’Agilité. »
•  « La simplicité – c’est-à-dire l’art de minimiser la quantité de travail inutile – est essentielle. »
•  « Les meilleures architectures, spécifications et conceptions émergent d'équipes autoorganisées. »
•  « À intervalles réguliers, l'équipe réfléchit aux moyens de devenir plus efficace, puis règle et modifie son comportement en conséquence. »

*Le Manifeste Agile est un texte rédigé par 17 experts reconnus pour leurs apports respectifs au développement d'applications informatiques sous la forme de plusieurs méthodes dont les plus connues sont Extreme Programming et Scrum.

Agile Tour 2010 à Nantes

Jeudi dernier (21/10/2010), je me suis rendu avec plusieurs collaborateurs à l'Agile Tour organisé à l'école des Mines par l'Association Agile Nantes.
Ayant juste quelques idées préconçues sur le sujet j'y suis allé en grand curieux...
Est-ce que cette méthode est réellement révolutionnaire ?
Est-ce qu'elle peut apporter à notre organisation ?
Peut-on vraiment mettre en oeuvre ces principes en SSII ?

J'ai eu de nombreuses réponses et surtout une introduction à l'Agilité extrêmement claire et captivante par Mr Regis Medina lui même.

Merci à l'Association AgileNantes, vivement l'année prochaine !

Concevoir : L'adaptabilité maximale ou le Responsive Design

La multiplication des médias permettant l'accès à nos sites devient extrême.
Là où, il y a encore 2 ans, on devait traiter le cas de l'affichage d'un site dans 2 résolutions cibles (800x600 et 1024x768), on arrive à un nombre de résolutions possibles quasiment égal au nombre de terminaux (tablette, smartphone, portable, TV, ...).

Si vous avez déjà été confronté aux problématiques d'impression sur des sites Web, vous avez surement, au moins une fois, résolu cette problématique par l'utilisation d'une feuille de style dédiée à l'impression(media="print").
De même, il est envisageable de traiter la multitude de support par du spécifique :

• définition de redirection en fonction du média sur un site dédié = une charge de maintenance importante (même si c'est en partie géré si l'on utilise un CMS)
• chargement d'une feuille de style spécifique au média = autant de CSS que de terminaux, à faire évoluer pour tout nouveau terminal non compatible
• optimisation du site pour les médias de faible résolution = limitation des possibilités en terme d'ergonomie et de contenu

On voit clairement qu'il n'y a pas de solution miracle parmi celles ci-dessus, une réponse à ce manque d'adaptabilité passe par le "Responsive Design". Basé sur les "Fluid Grids", "Fluid Images"  ce concept propose une mise en page adaptative...

A partir de votre Mockup, vous définissez l'unité de base de votre page et toute la mise en page est définie sur la base de cette unité via la définition de taille en ems (si vous avez bataillé avec IE pour le redimenssionnement de texte cela ne doit pas être une unité inconnue ;)).

De cette manière, vos conteneurs (div) sont eux aussi proportionnels à votre contenu, dans l'exemple d'Ethan Marcotte,

on définit :

• corps de texte : 16px (soit 1 em)
• Titre H1 : 1,5em (24px/16px)
• Enumeration : 0,875em (14px/16px)

En traitant les conteneurs à l'identique (#page{max-width.61.75em} soit 988px/16px) on a une taille maximale variable fonction de la taille du texte du navigateur.

Ajouter à cela la nouvelle capacité de CSS3, à savoir les media queries et vous avez un environnement adapté au média qui consulte vos pages au sein d'un même design : That's all folks !


Sources :
http://www.w3.org/TR/css3-mediaqueries/
http://www.alistapart.com/articles/howtosizetextincss/
http://www.alistapart.com/articles/responsive-web-design/
http://www.alistapart.com/articles/fluidgrids/
http://unstoppablerobotninja.com/entry/fluid-images

Concevoir : Fancy Zoom, un script de zoom très réussi !

Pour faciliter la lecture d'une page tout en la rendant plus agréable à lire, nous l'agrémentons d'images en miniature.
Il est alors souvent nécessaire de permettre à l'utilisateur de visualiser ces illustrations en plus grand (voire en taille réelle).

La solution basique est d'insérer un lien href sur l'image, pour ouvrir l'image dans une nouvelle fenêtre. Vous avouerez que, même si c'est efficace, ce n'est pas très sexy. Il faut, de plus, gérer une à une toutes les images de vos sites... fastidieux !

C'est là qu'intervient Fancy Zoom, un script développé par Cabel.name.
Il va vous permettre de créer sur tous les liens pointants vers des images présentes sur votre site, un effet de Zoom du plus bel effet, positionnant l'image sélectionnée au centre de la page en surimpression.

Sa mise en oeuvre est très simple :

• Télécharger le fichier suivant : FancyZoom 1.1.zip
• Déclarer les deux scripts suivants avant la balise de fin de header "/head" :
• < script src="/js-global/FancyZoom.js" type="text/javascript">< /script>
• < script src="/js-global/FancyZoomHTML.js" type="text/javascript">< /script>
• Réaliser l'appel à la méthode d'initialisation du composant setupZoom() au chargement de votre page : onload="setupZoom()"

Voilà, vous pouvez tester !!
Pour les images que vous ne voulez pas zoomer, ajoutez dans votre balise href : rel=”nozoom”

Ce script est offert gracieusement par son auteur, uniquement pour les sites à but non commercial. Rapprochez vous de lui si votre utilisation n'est pas dans ce cadre !

Il existe aussi une version JQuery : http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/