La phase de Création Graphique est l’une des phases les plus difficiles et les plus déterminantes pour un projet Ecommerce. Beaucoup de critères sont à prendre en compte : marketing, technique, efficacité de la transformation, esthétique (et donc complètement subjectif), ergonomique, « user-friendlique ;-) », etc… Le montage graphique des pages, assuré par le Directeur Artistique de Bysoft, peut ainsi prendre beaucoup de temps pour arriver au bon compromis. Mais on ne met pas à jour une Créa en deux coups de cuillère à pot, à la demande. Cela demande de nombreuses retouches et ajustements pour arriver au bon résultat. Nous avons donc décidé, au sein du Pôle E-Commerce de Bysoft, de préparer au mieux le terrain en limitant au maximum la phase Créative à son rôle premier : la Création.

Le Chef de projet travaille donc en amont avec l’E-commerçant, sur un Storyboard le plus précis possible, qui détermine les blocs présents sur les pages, et permet de discuter, tourner et retourner les blocs simplement, et décider ensemble de leur positionnement. Tout ceci dans le respect des priorités du Marchand, des volontés Marketing, des contraintes techniques de la plateforme Ecommerce, et des préconisations ergonomique et de navigabilité.

Une fois le prototype défini, la « couche de peinture » peut alors être appliquée, et le Directeur Artistique peut se focaliser sur son art, en « oubliant » les longs débats sur l’ergonomie et les nombreuses modifications et « essais » qu’il devait auparavant essuyer. Bien entendu, au fur et à mesure de la phase Créative, des revirements apparaissent forcément, mais la plupart des questions auront déjà été posées en amont et les réponses correspondantes auront déjà été apportées.

Axure permet également de donner un rendu de l’enchainement des pages entre elles, ce qui est important pour le client comme pour l’intégrateur.

Axure

Dessins en « fils de fer »

Dans les premières phases du projet, Axure permet facilement et simplement de créer des pages en « fil de fer » pour définir et valider le « Zoning » du site.

Il s’agit de positionner les blocs au sein des pages et de prioriser leur affichage :

Voici un exemple de page d’accueil :

Un prototype réalisé avec Axure

Masters

Une fois toutes les pages déclinées, le Marchand voudra peut-être modifier quelque chose dans le Haut de page, qui se répète de page en page. Pas de panique, vous n’aurez pas à refaire toutes les pages, Axure intégrant un système de « Masters », c’est-à-dire de blocs pouvant être repris de page en page. En le modifiant une fois, les changements apportés à ce bloc y seront répercutés sur toutes les pages dans lesquelles il apparaît. Plutôt très pratique pour tout ce qui peut se retrouver sur plusieurs pages distinctes (Haut de page, Bas de page, Blocs HTML libres, Listes de produits, etc…).

Animation du prototype : Storyboarding

Axure ne se contente pas de pages statiques. Il est aussi possible d’animer les pages pour créer un prototype complet, simulant la navigation du client. Vous pouvez ainsi créer des liens d’une page à une autre au clic de souris, déclencher des évènements au passage de la souris, animer des menus horizontaux ou verticaux, définir des états pour des panneaux dynamiques, variables en fonction d’évènements prédéfinis, etc… Cela permet de se rapprocher au maximum de la navigation qui sera mise en place sur le site web, et donc d’en donner au marchand la vision la plus fidèle possible, pour éviter les surprises.

Arborescence des pages

Les pages que vous créez via Axure peuvent être classées dans une arborescence à niveaux, pour mieux comprendre le plan du site.

Arborescence des pages

Les pages peuvent être indentées entre elles, et déployées/réduites.

Prototype au format HTML

Un prototype, c’est bien, mais encore faut-il qu’il soit accessible rapidement et simplement par les différents interlocuteurs travaillant sur le projet. Axure permet ainsi de générer automatiquement un prototype au format HTML. Nous mettons alors ce prototype à disposition sur un espace Web pour que le marchand puisse le consulter à tout moment.

Un prototype

Le prototype présente une frame sur la gauche, listant l’arborescence des pages du site et permettant d’y accéder directement. Les éventuels commentaires sur la page apparaissent dans une autre frame, en bas.

Impression PDF des pages du site

Grâce à des utilitaires d’impression PDF, les pages peuvent être imprimées sur Papier pour permettre au Marchand de travailler dessus plus facilement. Le travail collaboratif peut également être partagé sur Axure, pour permettre à plusieurs personnes de modifier le storyboard en même temps, sans conflit.

Illustration avec la Créa

Une fois le prototype terminé, la phase de Création Graphique peut prendre le relais. Une fois les créas validées, nous mettons à jour le storyboard en supprimant les fils de fer et en replaçant sur le storyboard les pages de la créa, tout en conservant la navigation. Cela permet au client de vérifier le fonctionnement en « situation réelle », et surtout à l’équipe d’intégration de bien comprendre la navigation du site pour mettre en place le design sur le moteur de la plateforme.

Ce complément aux spécifications peut s’avérer précieux dans la mise en place du projet, notamment pour détecter les incohérences d’ergonomie et de navigation sur le site.

Spécifications

Axure permet d’ajouter, tout au long du storyboard, des indications, des annotations, des clarifications sur tous les éléments qui le composent. Tous ces éléments, que le Chef de projet aura pris du temps à apporter au storyboard, ne doivent pas être ressaisis dans les documents de spécification. Axure propose un moteur de génération automatique de spécifications. Un clic lance la création d’un document Word comportant toutes les pages, les descriptifs et les interactions mises en place (« au clic sur tel lien, on est envoyé vers telle page », etc…).

Ces spécifications peuvent servir de base pour la rédaction des spécifications complètes du projet, et notamment pour la description complète des pages du site.

Schémas, Workflows et Process

Un bon schéma est bien plus compréhensible et bien plus impactant que des pages de spécifications textuelles. Un diagramme de séquences, des cas d’utilisation, un workflow… Tous ces schémas ou diagrammes permettent de synthétiser l’information et de la rendre claire, accessible et compréhensible dans un minimum de temps, aussi bien pour nos Clients que pour nos équipes de développement, avides de schémas permettant d’identifier tous les cas d’utilisation pouvant se présenter dans la vie du projet.

Axure permet de créer des diagrammes de flux , en choisissant les widgets « Flow » :

Accès au menu Flows

Et en choisissant le type de diagramme « Flow » pour une page donnée :

Choisir son type de diagramme

Les diagrammes se construisent alors très simplement :

Exemple de diagramme réalisé avec Axure

Les points à retenir de notre point de vue dans cette annonce :

• Support du format Action Message (Action Message Format AMF) dans le Zend Framework
• Intégration entre le Zend Studio et le Adobe Flex Builder (codage, débuggage, déploiement)
• Publications de livres blancs et de “best practices” directement par les éditeurs

Vous trouverez le communiqué de presse complet et en français à http://www.zend.com/fr/company/news/Press/zend-s-associe-adobe-pour-acc-l-rer-le-d-veloppement-d-applications-internet-riches-ria-utilisant-php-et-le-framework-open-source-flex

Premier point, l’intégration du lecteur Flash ou de l’environnement d’exécution AIR (Adobe Integrated Runtime) dans un terminal sera dorénavant gratuite. Si ces deux technologies sont téléchargeables gratuitement par un utilisateur, leur préinstallation au sein d’un PC ou d’un produit nomade n’était pas toujours permise sans paiement de royalties. Cette contrainte n’existe plus aujourd’hui.

Les formats SWF (Shockwave Flash) et FLV/F4V (vidéo Flash) sont également utilisables sans contrepartie financière. Auparavant, les éditeurs pouvaient utiliser les spécifications d’Adobe pour concevoir des logiciels créant des fichiers SWF ou FLV/F4V, mais ne pouvaient s’en servir pour développer des lecteurs alternatifs. Ce n’est plus le cas maintenant. C’est une avancée qui permettra à ces deux formats de prétendre à l’appellation de ’standard industriel’. Des fournisseurs de contenu majeurs comme la BBC, MTV Networks et NBC Universal se sont montrés intéressés par cette annonce.

La compagnie publie également les spécifications de la couche d’abstraction matérielle de Flash. Les industriels pourront ainsi intégrer cette technologie au sein de leurs produits, (presque) sans l’aide d’Adobe. Cette partie intéressera en tout premier lieu les fabricants de terminaux mobiles, tels les téléphones portables. De nombreuses sociétés soutiennent cette initiative : ARM, Chunghwa Telecom, Cisco, Intel, LG Electronics, Marvell, Motorola, Nokia, NTT DoCoMo, Qualcomm, Samsung Electronics, Sony Ericsson, Toshiba et Verizon Wireless.

Enfin, le protocole AMF (Action Message Format) est ouvert. Il permet aux applications Flash de recevoir directement des informations en provenance de bases de données distantes, ce qui – dans la pratique – simplifiera le travail du programmeur. Le protocole Flash Cast sera également ouvert dans les mois à venir. Flash Cast est une solution qui offre aux opérateurs mobiles de transmettre directement des données vers les téléphones

Adobe AIR permet aux développeurs de créer des RIA sur leur poste de travail en exploitant les technologies web et les compétences associées qu’ils maîtrisent déjà telles que, HTML, Ajax, PDF, Adobe Flash et Adobe Flex. Les applications déployées avec Adobe AIR offrent les atouts des applications bureautiques : lecture/écriture de fichiers en local, utilisation conjointe d’autres applications présentes sur le poste client et stockage des données locales sur le poste de travail. Adobe Flex Builder 3, outil de développement basé sur Eclipse, accélère le développement d’applications Flex et inclut des fonctionnalités pour le déploiement de RIA sur Adobe AIR. Il s’intègre à la suite Adobe Creative Suite 3.

Les principaux composants d’Adobe AIR sont Open Source, notamment le moteur de rendu HTML Webkit, Tamarin ActionScript Virtual Machine  et la base de données locale SQLite.

Nos équipes déjà expertes sur Flash/Flex ont étudié AIR depuis quelques mois et sa version Beta. La technologie est très prometteuse et nous attendons notre premier commercial sur cette technologie avec impatience.

Pourquoi Flex intéresse tant de monde:

Les RIA (Riche Internet Application http://fr.wikipedia.org/wiki/Rich_Internet_Application) ont de plus en plus de succès. On retrouve tout ce qu’il y a dans un logiciel sur un navigateur.
Certaines estimations (Gartner Research) prédisent que d’ici 2010, 60% des applications auront un composant RIA.
Pour faire des RIA plusieurs solutions techniques sont possibles :
- XHTML / Ajax
- Xul (http://fr.wikipedia.org/wiki/XUL )
- Flex

Exemples avec Flex :

Voici quelques exemples de sites réalisés avec Flex :
Picnik : http://www.picnik.com/
Yahoo map : http://maps.yahoo.com/#env=f
Youtube Remixer : http://www.youtube.com/ytremixer_about

Comment ça marche :

Accessibilité par les internautes

Flex est un langage de programmation.
Les développements effectués en Flex peuvent ensuite être visualisés sur une application web à l’aide d’un lecteur flash (Flash Player).
Les internautes n’ont donc pas besoin d’installer un logiciel particulier sur leur ordinateur pour pouvoir accéder aux applications.
A titre d’information, voici les indicateurs pour l’utilisation du Flash Player en juin 2007 : http://www.journaldunet.com/developpeur/indicateurs/usage-langages-web.shtml

Si l’internaute possède la version 8 du lecteur, la version 9 sera installée de façon pratiquement transparente pour l’internaute.

Les applications réalisées en Flex sont accessibles sur tous les environnements : Linux,Max, Windows …

Présentation des données

Toutes les données sont chargées à l’ouverture de la page. Mais elles ne sont pas toutes visibles.
Le contenu affiché est adapté en fonction des évènements. Par exemple : selection d’un menu, ajout d’un produit à un panier, selection d’une couleur … mais également des événements plus complexes comme permettre le dimensionnement d’une image (les éléments environnants se ré-adaptent et se positionnent automatiquement en fonction de la taille choisie) …

Interactions avec les autres langages

Flex peut fonctionner avec un Back End réalisé en PHP, Java, Ruby …
Par exemple, PHP génère un flux XML contenant l’ensemble des données et Flex charge le fichier XML pour les afficher.Les formats d’échanges possibles sont
- XML
Solution la plus simple
- Json
Solution possible à partir de PHP 5
- AMF (http://blogs.adobe.com/mikepotter/2006/02/flex_and_php_us.html et http://www.amfphp.org/ )
Solution plus difficile mais la plus puissante. Elle permet le transfert des objets de PHP (entre autres) à Flex et inversement.

L’intérêt de Flex :

L’intérêt pour Flex est grandissant : http://www.indeed.com/jobtrends?q=flex+php&l
Il a pour l’instant beaucoup de demande et très peu de développeurs.

Un (très) court extrait de la conférence :

Pour les développeurs:

Je ne vais pas répéter ce que de nombreux sites proposent comme tutoriaux voici donc quelques liens permettant de faire ses premiers pas en Flex :
 Download the tools : http://www.adobe.com/fr/products/flex/
 Flex for PHP developers http://flex.org/php/
 French community : http://www.flex-info.fr/newsletter-adobe-flex/
 Flashing learning, and showcasing community – Flex Tutorials, Flex Discussions, Flex Developers. :http://www.flexcodex.com/