Homepage d'alcooquizz

Nous avons été mandaté par le CHUV et son département d’alcoologie pour réaliser un site de prévention et d’information sur les risques liés à l’alcool nommé alcooquizz.ch.  Le site fonctionne comme un questionnaire qui permet à chaque personne d’évaluer sa situation par rapport à l’alcool.  Le diagnostique, à la fois personnalisé et anonyme, fournit des informations précises ainsi que des recommandations adaptées précisément à la situation de chacun.

Annoncé aujourd’hui par une conférence de presse, le site va faire l’objet d’une plus vaste campagne de communication, relayée notamment durant les divers festivals de l’été afin de sensibiliser sans stigmatiser ni culpabiliser.

La particularité de ce projet a été pour nous de bâtir tout un concept qui permette une certaine neutralité. Il fallait pouvoir parler d’alcool sans culpabiliser, être agréable avec un style un peu ludique mais pas trop non plus et sensibiliser et informer sans non plus provoquer de malaise.  Bref, créer une prise de conscience et permettre peut être de nouveaux réflexes par rapport à l’alcool car on se rend compte que beaucoup d’idées reçues existent sur le sujet mais que finalement les gens savent très peu.

Alcoopedia - Base de connaissance du site

La base de connaissance, alcoopedia, s’enrichira au fur et à mesure des interactions et des questions avec le site.  Bâtie avec un nuage de tags, elle permet de remonter les articles les plus demandés ainsi que les mots les plus recherchés.

Nous avons conçu le branding (alcooquizz et alcoopedia) ainsi que toute l’identité visuelle du logo et du site.  Nous avons également développé le site web (en flex & typo3) qui sera prochainement décliné sous forme d’une application iPhone.  Le CHUV et son équipe ont quant à eux fait un énorme travail de préparation et de rédaction pour que le site s’inscrive aussi dans la lignée des travaux de l’OMS et serve à terme, de base statistique sur les comportements liés à l’alcool.

Nous sommes ravis d’avoir contribué à ce beau projet et préparons actuellement la suite.

C’est une manière inédite de communiquer sur un sujet aussi sensible et nous sommes curieux de voir comment le projet sera reçu par les citoyens et les médias.

Update :

Les premières retombées sont plutôt positives avec pour la première journée d’introduction du site avec 6’700 visiteurs et déjà quelques articles.

http://www.20min.ch/ro/news/vaud/story/Evaluez-votre-consommation-d-alcool-19430396

http://www.tdg.ch/evaluez-consommation-alcool-site-web-2010-07-15

http://www.lematin.ch/actu/suisse/evaluez-consommation-alcool-site-web-299738

http://www.24heures.ch/evaluez-consommation-alcool-site-web-2010-07-15

http://www.tsr.ch/info/suisse/2275848-un-site-web-pour-evaluer-son-rapport-a-l-alcool.html

I was recently playing around with flex, having fun fading in and out stuff when I realized that text components such as LABEL or TEXT where not very “fade friendly”. There was nothing special with my code, no special font or anything, so I googled a little and found out that you need to embed a font for it to be “fadable”, event if it is a system font.

Here is an example :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute"
                width="200" height="200"
                backgroundAlpha="0"
                backgroundColor="#FFFFFF">

    <mx:Script>
        <![CDATA[
            [Embed(systemFont='Verdana', fontName='myVerdana', mimeType='application/x-font')]
            public var myVerdana:Class;
        ]]>
    </mx:Script>

    <mx:Canvas id="myCanvas"
               backgroundColor="#AAAAAA"
               backgroundAlpha="1"
               width="200" height="150"
               hideEffect="{myFade}"
               showEffect="{myFade}">
        <mx:Text horizontalCenter="0"
                 top="30"
                 color="#000000"
                 text="Embeded Font Text"
                 fontFamily="myVerdana"
                 fontSize="15"/>
        <mx:Text horizontalCenter="0"
                 top="80"
                 color="#000000"
                 text="Non Embeded Font Text"
                 fontSize="15"/>
    </mx:Canvas>

    <mx:Fade id="myFade" duration="1000" />

    <mx:Button click="{myCanvas.visible = !myCanvas.visible}"
                 horizontalCenter="0"
                 top="160"
                 label="Fade In/Out"/>

</mx:Application>

Hope this helps…

Tout d’abord, vérifiez que vous avez les locales nécessaires au niveau du sdk (/Adobe Flex Builder 3/sdks/3.2.0/frameworks/locale/). Pour chaque locale, vous devez avoir un répertoire correspondant (par exemple en_US ou fr_FR). S’il vous en manque un, il suffit simplement de copier un des répertoires existants et de le renommer.

Pour commencer, il nous faut un fichier par langue pour y mettre les traductions nécessaires. Pour cela, il suffit de créer un répertoire locale/ dans votre répertoire src/ :

Dans ce répertoire locale/ vous devrez ensuite créer un répertoire pour chaque langue que vous voulez traduire (ici l’allemand et le français). Enfin, chaque répertoire doit contenir le fichier de traduction qu’on appellera ici “monProjet.properties”.

Les fichiers .properties contiennent une ligne par traduction selon le format de l’exemple ci dessous :

L_LOGIN=identifiant
L_PASSWORD=mot de passe
L_EXIT=quitter

J’ai l’habitude (pour des raisons historiques ) d’écrire mes clés de traduction en majuscule et de les faire commencer par un “L_” mais ce n’est pas une obligation.

Maintenant que nous avons nos fichiers de traductions, il faut dire à l’application qu’ils existent. Pour cela, il suffit de rajouter au fichier monProjet.mxml les quelques lignes suivantes :

    <mx:Metadata>
        [ResourceBundle("monProjet")]
    </mx:Metadata>

Maintenant, chaque fois que vous voudrez traduire un texte, il faudra l’intégrer de la manière suivante à votre code :

    resourceManager.getString('monProjet', 'L_LOGIN');

Reste encore à préciser à votre application quelle est la langue actuellement sélectionnée. Rien de plus simple. La commande ci-dessous permet justement d’indiquer la langue choisie (quelle chance !) :

    resourceManager.localeChain = ['fr_FR'];

Evidemment, pour l’allemand, ça aurait donné :

    resourceManager.localeChain = ['de_DE'];

Une dernier petit détail… la compilation. En effet, lors de la compilation de votre projet, il faut préciser les langues utilisées et l’endroit où se trouvent les fichiers de traduction. Pour cela, dans les propriétés de votre projet, une section (“Flex Compiler”) traite de la compilation. Vous pouvez alors donner des arguments supplémentaires au compilateur. Pour la gestion multilingue, nous allons ajouter ceux-ci :

-locale=fr_FR,de_DE -allow-source-path-overlap=true -source-path=locale/{locale}

Cette fois le tour est joué, votre application est polyglotte.

Voici un très petit exemple qui permet de rapidement tester la fonctionalité :

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    creationComplete="init()">
    <mx:Metadata>
        [ResourceBundle("monProjet")]
    </mx:Metadata>
    <mx:Script>
        <![CDATA[
            private function init():void {
                resourceManager.localeChain = ['fr_FR'];
            }
        ]]>
    </mx:Script>
    <mx:Label text="FR" x="10" y="10"
              click="{resourceManager.localeChain = ['fr_FR']}"/>
    <mx:Label text="DE" x="10" y="30"
              click="{resourceManager.localeChain = ['de_DE']}"/>
    <mx:Label x="50" y="20"
              text="{resourceManager.getString('monProjet', 'L_HELLO')}"/>
</mx:WindowedApplication>

Bonne journée.

My particular issue was the following. We had a list of products, each of them having a related picture. Some of these products could be bought, others not yet so we wanted to display the later as “disabled”. In other words, we wanted a nice colorfull picture for some products and a grayscale picture for others but the only picture available to us was the colorfull one.

So we used the ColorMatrixFilter. Here is how :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    height="300"
    width="600"
    backgroundGradientAlphas="[0,0]"
    backgroundColor="#FFFFFF">

    <mx:Script>
        <![CDATA[

            private var rLum:Number = 0.212671;
            private var gLum:Number = 0.715160;
            private var bLum:Number = 0.072169;

            [Bindable]
            private var bwMatrix:Array =
                [rLum, gLum, bLum, 0, 0,
                 rLum, gLum, bLum, 0, 0,
                 rLum, gLum, bLum, 0, 0,
                 0, 0, 0, 0.5, 0];

            [Bindable]
            private var imgUrl:String = "http://blog.netinfluence.ch/public/julien/editImgDemo.png";

        ]]>
    </mx:Script>

    <mx:ColorMatrixFilter id="cmf" matrix="{bwMatrix}" />

    <mx:Image source="{imgUrl}" height="300" width="300"/>
    <mx:Image source="{imgUrl}" height="300" width="300"
              left="300" filters="{[cmf]}"/>

</mx:Application>

This is a very simple example. You can actually apply this method to other components than the image one. And if you play around with the matrix and the rgb values, you will find that you can change many things. The best way to see what you can do is to check out this little app : http://afoucal.free.fr/wp-content/ColorMatrixBuilder/ColorMatrix.html

So go ahead and build you own photoshop

Unsatisfied with this first approach, I looked for something else. I finally found that Flex offers a lot of possibilities allowing you to create cool layouts using only code. This makes global modifications to your application a lot easier to manage.

Here is a simple example that does not use one single image :

And here is the code

/*mxml file*/
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    height="200"
    width="200"
    xmlns:geom="flash.geom.*">
    <mx:Style source="css/style.css"/>
    <mx:Canvas styleName="outsideCanvas"
               height="190" width="190">
        <mx:filters>
            <mx:DropShadowFilter distance="0"
                                 quality="15"
                                 alpha="0.5"
                                 inner="false"/>
        </mx:filters>
        <mx:Canvas styleName="insideCanvas"
                   height="150" width="150"
                   verticalScrollBarStyleName="verticalScrollBar">
            <mx:filters>
                <mx:DropShadowFilter distance="0"
                             quality="15"
                             alpha="0.5"
                             inner="true"/>
            </mx:filters>
            <mx:Canvas verticalScrollPolicy="off"
                       horizontalScrollPolicy="off"
                       styleName="buttonStyle"
                       id="exampleButton" width="80"
                       horizontalCenter="0"
                       verticalCenter="0">
                <mx:Canvas y="1" x="1"
                           width="{exampleButton.width-4}"
                           height="50%"
                           backgroundAlpha="0.5"
                           styleName="insideButton"/>
                <mx:Canvas y="0" x="0" width="100%"
                           height="100%"
                           backgroundAlpha="0.5"
                           visible="{!this.enabled}"
                           styleName="insideButton" />
                <mx:Text text="OK"
                         verticalCenter="0"
                         horizontalCenter="0"
                         paddingTop="4"
                         color="#FFFFFF" />
                <mx:mouseOver>
                    <![CDATA[
    exampleButton.setStyle('backgroundColor', '#DF0021');
                    ]]>
                </mx:mouseOver>
                <mx:mouseOut>
                    <![CDATA[
    exampleButton.setStyle('backgroundColor', '#666666');
                    ]]>
                </mx:mouseOut>
            </mx:Canvas>
        </mx:Canvas>
    </mx:Canvas>
</mx:Application>

/* CSS file */
Application {
     backgroundGradientAlphas: 1, 1;
     backgroundGradientColors: #FFFFFF, #FFFFFF;
}
.outsideCanvas {
     horizontalCenter:0;
     verticalCenter: 0;
     backgroundAlpha: 1;
     backgroundColor: #EEEEEE;
     cornerRadius: 8;
     borderStyle: solid;
     borderThickness: 2;
     borderColor: #FFFFFF;
}
.insideCanvas {
     horizontalCenter:0;
     verticalCenter: 0;
     backgroundAlpha: 1;
     backgroundColor: #FFFFFF;
     cornerRadius: 8;
     borderStyle: solid;
     borderThickness: 2;
     borderColor: #FFFFFF;
}
.buttonStyle {
     borderColor: #DDDDDD;
     borderStyle:solid;
     borderThickness: 1;
     focusThickness: 0;
     cornerRadius: 6;
     backgroundColor: #666666;
     backgroundAlpha: 1;
}
.insideButton {
     cornerRadius: 3;
     borderColor: #DDDDDD;
     borderStyle: solid;
     borderThickness: 0;
     backgroundColor: #FFFFFF;
}

If this was not an example, the button would have been a component for obvious reusability reasons. You can do this sort of stuff for other components as well such as scrollbars, datagrids, etc… have fun !

Le principe

D’un côté, l’application AIR et de l’autre, le serveur sur lequel se trouve la nouvelle version de l’application AIR ainsi qu’un fichier update.xml qui décrit cette nouvelle version. Périodiquement, l’application AIR va vérifier sur le serveur la présence d’une nouvelle version et dans un tel cas, la télécharge et l’installe. Ainsi, mettre à jour un parc informatique devient simple et rapide.

L’application AIR

La première chose à faire est d’importer les librairies nécessaires à la mise à jour automatique :

import air.update.ApplicationUpdaterUI;
import air.update.events.UpdateEvent;

Ensuite, il vous faut une méthode qui vérifie si la version présente sur le serveur est plus récente que la version actuelle. Cette méthode peut par exemple être appelée dans votre méthode init() (creationComplete=’init()’).

// Création de la variable appUpdater - merci Blindheit
public var appUpdater:ApplicationUpdaterUI = new ApplicationUpdaterUI();
public function checkForUpdates():void
{
    appUpdater.addEventListener(UpdateEvent.INITIALIZED, updateCheckNow);
    appUpdater.updateURL = "http://server/update.xml";
    appUpdater.delay = 0.1;
    appUpdater.isCheckForUpdateVisible = false;
    appUpdater.initialize();
}

Quelques petites explications supplémentaires :

• updateURL est l’url du fichier update.xml qui se trouve sur le serveur
• le delay est l’interval de temps (en jours) séparant deux vérifications de la version sur le seveur
• isCheckForUpdateVisible permet d’activer ou de désactiver la fenêtre qui demande à l’utilisateur si il veut en effet regarder si une mise à jour existe. Ici, elle est désactivée parce que je la trouve superflue. Il existe également d’autres options permettant de jouer avec l’affichage des fenêtres.
• initialize() active le processus
• Enfin, grâce à l‘addEventListener, la méthode updateCheckNow est appelée au retour de initialize. Ceci permet, grâce à la fonction checkNow(), de forcer un appel au serveur lors du lancement initial de l’application.

public function updateCheckNow(event:UpdateEvent):void
{
    appUpdater.checkNow();
}

Voilà pour l’application AIR.

Côté serveur

Sur le serveur vous devez mettre l’application AIR et un fichier update.xml qui décrit la nouvelle version de l’application. Au niveau de l’application, vous devez mettre à jour le numéro de version qui se trouve dans le fichier nomxxx-app.xml. Ensuite ce numéro de version doit se retrouver dans le fichier update.xml :

<update xmlns="http://ns.adobe.com/air/framework/update/description/1.0">
    <version>0.2</version>
    <url>http://server/nomxxx.air</url>
    <description>
        Nouvelle version 0.2 de nomxxx
    </description>
</update>

Il ne reste plus qu’à installer votre version 0.1 sur votre ordinateur, à déposer la version 0.2 sur le serveur et lorsque vous lancez la version 0.1, elle ira automatiquement vérifier le fichier update.xml qui se trouve sur le serveur et la mise à jour se fera ensuite automatiquement.

Remarque :

• Vérifier bien que l’application qui ouvre par défaut vos fichiers AIR est bien la bonne. Dans le cas contraire, la mise à jour plantera au moment de l’installation de la nouvelle version puisqu’elle ne pourra pas se lancer automatiquement.

Voilà, bon devs !

1- Si votre application s’appelle “demo”, vous devez avoir un fichier qui se nomme : demo-app.xml. Ouvrez ce fichier et faites les modifications suivantes :

• remplacez
  <!– <systemChrome></systemChrome> –>
  par
  <systemChrome>none</systemChrome>
• selon le look de votre application, il peut être intéressant de rendre le fond transparent. Pour cela, remplacez
  <!– <transparent></transparent> –>
  par
  <transparent>true</transparent>

2- Il ne reste plus qu’à modifier votre fichier demo.mxml en rajoutant dans la balise <mx:WindowedApplication> l’attribut showFlexChrome=”false”

• <mx:WindowedApplication showFlexChrome=”false”>

Voilà, c’est déjà fini. Vous pouvez maintenant laissez exprimer votre esprit artistique sans barrières

Avant	Après