Pour continuer à utiliser les services de Google Maps afin d’afficher des cartes interactives sur leurs sites web, les collectivités locales, les organismes publics et les entreprises devront passer à la caisse à partir du 16 juillet !

 

Jusqu’alors généreux avec les sites web exploitant en masse les API de son service de cartographie, Google Maps a revu sévèrement sa grille tarifaire. En effet, jusqu’à présent, les sites web ne payaient qu’au-delà de 25 000 affichages de leurs cartes par jour.
Ce quota passe à 28 000… par mois, soit un peu moins de 1 000 affichages gratuits par jour !

Un changement radical de politique tarifaire qui va impacter très fortement les collectivités locales, organismes publics, acteurs du tourisme et entreprises.

Prenons par exemple, le site web www.isere-tourisme.com du Comité Départemental du Tourisme de l’Isère, culminant à plus de 100 000 visites par mois. Si chaque visiteur consulte au moins une fois la carte interactive, élément central du site, la facture mensuelle s’élèvera à partir du 16 juillet à 500 € / mois au lieu de 0 auparavant.

Autant dire que la note risque d’être salée pour les nombreuses collectivités et entreprises intégrant les services de Google Maps pour étoffer leur site web ou leur application.

De surcroît le timing imposé par Google est serré puisque les nouvelles conditions tarifaires entrent en vigueur dés le 16 juillet. Certaines collectivités locales risquent de voir disparaître leurs cartes brutalement, faute de temps pour gérer la situation et basculer vers une autre solution.

Quelles alternatives pour remplacer Google Maps ?

Face à une telle hausse des coûts et au risque de voir votre carte rapidement remplacée par un message d’erreur, que faire ? Pour cela 2 alternatives pour remplacer Google Maps s’offrent à vous :

Option #1 — réservée aux plus bricoleurs :

Développer par vous même votre carte interactive en utilisant une solution open source comme OpenStreetMap

L’atout des solutions libres réside dans le fait qu’elles sont par natures gratuites, mais ne perdez pas de vue que vous ne disposerez pas d’une solution clé en main et qu’il faudra supporter en interne le coût d’un développement spécifique.

De plus, même des services gérés bénévolement et à but non lucratif ont des limites, c’est le cas des services OpenStreetMap de fond de carte ou de géocodage. Il faut en effet bien financer à un moment ou un autre l’infrastructure qui n’est pas extensible à l’infini. Afin d’éviter que leurs serveurs ne surchauffent, OpenSreetMap limite donc l’usage de ses services et vous pousse à investir dans votre propre solution d’hébergement.

Autre inconvénient avec cette solution en open source, vous ne maîtrisez pas pleinement les données affichées sur la carte car OpenStreetMap affiche des données recueilles et publiées par n’importe quel membre de leur communauté d’utilisateurs.
En somme, en utilisant OpenStreetMap pour développer votre carte interactive, votre organisation s’expose au risque de diffuser des informations partielles ou potentiellement fausses.

Option #2 — pour les organisations souhaitant faire le choix d’une solution pérenne tant techniquement qu’économiquement : 

Saisir l’opportunité d’être accompagné par un éditeur de solutions de cartographie web, afin d’obtenir une carte interactive offrant le meilleur service d’information à votre public.

Pour ce rôle, faîtes confiance à Smart/Origin, start-up innovante officiant dans les domaines de la data visualisation, du développement web et mobile et des systèmes d’informations géographiques !

Notre équipe accompagne de nombreuses collectivités locales, organismes publics et entreprises dans l’exploitation du potentiel géographique de leurs données pour développer l’attractivité de leurs territoires, piloter leurs activités et rendre l’information accessible et lisible au plus grand nombre.

Pour remplacer Google Maps, nous vous proposons notre offre Cities, pensée pour offrir à votre public une expérience cartographique immersive au service de la découverte de votre territoire et de la valorisation de votre patrimoine.

Avec Cities, vous représentez sur votre carte interactive l’ensemble des points d’intérêts et acteurs locaux de votre territoire :  lieux touristiques, commerces, lignes de transport en commun, restaurants, hôtels, espaces naturels, centres d’affaires… Habillée aux couleurs de votre organisation, votre carte interactive trouvera une place de choix sur votre site web pour booster votre communication et attirer plus de visiteurs.

 

5 raisons de choisir l’offre Cities de Smart/Origin comme alternative à Google Maps 

 

 

1#   Le sens du design dans le moindre détail pour une carte habillée à vos couleurs

Chez Smart/Origin, nous mettons à votre disposition les talents de notre directrice artistique pour habiller votre carte interactive aux couleurs de votre organisation. C’est l’assurance que votre carte interactive soit unique et différenciante. Elle deviendra rapidement un élément central de votre site web et de votre communication digitale pour valoriser votre patrimoine et accroître l’attractivité de votre territoire.

2#   Une expérience d’utilisation au service de la découverte de votre territoire

Avec Cities, vous organisez facilement les points d’intérêts et lieux emblématiques de votre territoire en thématiques, catégories et filtres pour faciliter la navigation de vos visiteurs. Un système de suggestion permet d’accéder rapidement à vos contenus et de proposer des parcours thématiques et différents itinéraires personnalisés : circuits, balades, lignes de transports…

3#   Une carte adaptée à tous les supports et s’intégrant sans coutures

Qu’il s’agisse d’intégrer une carte interactive dans votre site web ou dans votre application web, Cities s’adapte à votre environnement. Le responsive design de votre carte interactive permet à votre dispositif de communication d’être accessible depuis n’importe quel navigateur web et sur tous les formats de smartphones et tablettes. C’est l’assurance que votre carte interactive soit toujours consultable en situation de mobilité.

4#   La possibilité d’enrichir votre carte avec des contenus et services à forte valeur ajoutée

Avec Cities, offrez à votre public une expérience cartographique immersive au service de la découverte de votre territoire et de la valorisation de votre patrimoine. Vous avez la possibilité de raconter l’histoire de vos lieux emblématiques, de proposer des informations contextuelles et d’enrichir le contenu associé à vos points d’intérêts grâce à des fiches détaillées s’ouvrant d’un simple clic sur votre carte.

Avec Cities, vous pouvez également proposer à vos visiteurs un calculateur d’itinéraires pour leurs permettre de rechercher une balade, un parcours ou de créer un itinéraire personnalisé.

5#   Un accompagnement sur mesure au service de la réussite de votre projet

Enfin, avec Smart/Origin, vous faites le choix d’un partenaire proche de vos préoccupations, vous accompagnant tout au long des étapes structurantes de votre projet et s’assurant de l’hébergement, des évolutions et de la maintenance de votre carte interactive.

Pour la réussite de votre projet, une équipe dédiée à votre organisation sera composé de profils complémentaires : ingénieur de développement, designer d’interface, architecte, chef de projet.

6#   Bonus : un retour d’expérience sur Cities

« Cities est un outil très intuitif et facile d’utilisation, nous constatons des résultats positifs de la part du grand public l’utilisant sur notre site web. Nos usagers plébiscitent l’ergonomie et la facilité de navigation de la carte interactive. Pour notre part, nous avons particulièrement apprécié votre réactivité pour faire évoluer la carte et répondre à toutes nos requêtes. » : Magali Brunet, Communauté d’Agglomération Cannes Pays de Lérins

Vous souhaitez remplacer Google Maps dès à présent et en savoir plus sur Cities ?

Envoyez nous un email à contact@smart-origin.com
ou appelez notre équipe au 04 76 41 16 69 pour échanger plus longuement sur votre projet.

D’après une étude menée par Microsoft en 2015, en arrivant sur un nouveau site web, le visiteur décide en huit secondes de poursuivre sa navigation ou de fermer la page. Durant ces huit secondes, il aura lu les titres principaux, survolé un début de texte et regardé rapidement les images, et aura perçu inconsciemment les couleurs utilisées.

Dans cet article, nous allons parler de l’importance du choix de couleurs pour le design de votre interface d’application ou site web. Car celles-ci ont une signification dans l’esprit de l’utilisateur, elles influencent ses émotions et ses actes. Mais attention, ces principes généraux que nous allons voir ici sont valables pour l’occident. Nous verrons en fin d’article quelques principes à avoir en tête concernant les autres régions du monde, car selon les cultures la signification des couleurs diverge.

Notre perception des couleurs est d’instinct liée à leur présence primitive dans la nature, voici donc quelques principes généraux à avoir en tête lorsqu’on choisi une couleur pour notre logo et notre charte graphique.

Blanc

Qualités associées : simplicité, pureté, spiritualité, virginité, innocence, simplicité, précision, propreté, hiver, neige, efficacité, innovations, sainteté, optimisme.

Activités : mode, actualités, technologies, informatique, santé.

Gris

Qualités associées : solennité, professionnalisme, sophistication, pragmatisme, intemporalité.

Activités : sites professionnels, articles de luxe ou pour créer un effet d’équilibre et de calme.

Bleu

Qualités associées : clarté, confiance, calme, confiance, contrôle, succès.

Activités : high-tech, réseaux sociaux, banques, secteurs juridiques et de la santé.

Jaune

Qualités associées : énergie, joie, optimisme.

Activités : tourisme, énergie solaire, électricité.

Marron

Qualités associées : fiabilité, robustesse, stabilité, amitié, nature.

Activités : contexte culturel ou luxueux, secteur du chocolat.

Noir

Qualités associées : sérieux, luxe, pouvoir, formalité, chic, sophistication, élégance, profondeur, tristesse, autorité, prestige, puissance.

Activités : cinéma, luxe, art, photo.

Orange

Qualités associées : motivation, impulsion, optimisme, enthousiasme, dynamisme, vitalité, équilibre, joie, chaleur, détermination, créativité, encouragement, amusement, fraicheur, jeunesse.

Activités : divertissement, jeunesse, sport, nouvelles technologies, création.

Rose

Qualités associées : amour, féminité, enfance, charme, intimité, chic, beauté, énergie.

Activités : journal, univers de l’enfance.

Rouge

Qualités associées : énergie, mouvement, passion, amour, confiance.

Activités : nourriture, mode, loisirs, sport, marketing, publicité, services d’urgence, santé.

Vert

Qualités associées : croissance,  salubrité, équilibre, nature, environnement, espoir.

Activités : découverte, nature, voyage, écologie, développement durable, santé, renouveau.

Violet

Qualités associées : originalité, créativité, prospérité, mystère, respect, connaissance, élégance.

Activités : produits de beauté, astrologie, massages, yoga, spiritualité.

 

Voici quelques exemples d’interprétation des couleurs dans le reste du monde, bon à savoir si vous avez pour projet de travailler en collaboration avec d’autres pays :

Le blanc est la couleur du deuil dans la plupart des pays d’Asie, et représente le malheur en Inde. Le bleu caractérise le deuil en Iran, en Chine, c’est la couleur de l’immortalité. Le jaune est une couleur qui fait référence à la royauté en Asie. Au Japon, c’est un symbole de courage et de force. Pour les bouddhistes, le jaune est spirituel et apaisant. En Inde, il est associé au commerce et à la négociation. Enfin, il symbolise le deuil en Égypte. Le noir est porté par les jeunes garçons en Chine. En Inde, le noir rétablit l’équilibre et la santé. En Thaïlande, c’est la couleur de la malchance. Le rouge est la couleur du deuil en Afrique du Sud, elle représente la chance en Chine. C’est aussi la couleur des robes de mariée en Chine et en Inde. Le vert est la couleur du mensonge en Chine, en Irlande, le vert rappelle le symbole national, le trèfle à quatre feuilles.

Vous avez à présent quelques pistes afin de faire votre choix de couleurs pour votre charte graphique, pensez bien au public que vous ciblez et au marché visé. 


Article rédigé par Fanny Koch. 

Il vous est certainement déjà arrivé de vous rendre sur un site internet sur lequel ne trouvez pas les informations que vous cherchez facilement, jusqu’à en être agacé et finir par refermer la page. C’est pour éviter cela et dans un soucis d’améliorer les futurs sites internet que l’on s’interroge sur ce qui fonctionne et ne fonctionne pas dans la lecture d’une page web.

Depuis peu utilisée en marketing, une méthode permet d’analyser le suivi du regard afin d’optimiser le contenu d’une page web : l’Eye-Tracking, aussi appelé oculométrie en français.

Cette méthode permet pour le marketing de mieux comprendre ce qui motive ou rebute les utilisateurs. Issue de l’ophtalmologie et des sciences cognitives, cette méthode permet d’analyser l’activité oculaire d’une personne en réalisant un suivi de son regard. Cela permet de savoir avec précision où regarde l’utilisateur, ce qu’il voit et ce qu’il ne voit pas.

L’Eye-tracking a permis de révéler que les déplacements du regard sur une page web sont fortement influencés par la mise en page et l’agencement des informations. De plus, contrairement à ce qu’on pourrait croire, notre regard éviterait toutes les zones qui s’apparentent à des bannières publicitaires : les zones publicitaires, animées ou non, ne sont généralement pas fixées par les internautes, qu’elles soient disposées sur les parties latérales ou en haut de page d’un site web. Ainsi la publicité tend à disparaitre sur les sites web : les utilisateurs ont des objectifs pour visiter un site et s’intéressent à son contenu, ils ne se laissent pas distraire par la publicité. Pour ce faire, des tests d’Eye-tracking sont réalisés sur des participants. Ils se déroulent généralement dans un laboratoire d’études cognitives. L’Eye-tracker est un écran d’ordinateur dans lequel sont placées des diodes qui émettent de la lumière infrarouge (inoffensive pour l’œil). Des caméras intégrées dans l’écran filment à distance la réflexion de la lumière infrarouge sur les pupilles du participant afin d’identifier les zones qu’il observe. Afin d’analyser en détail le comportement des consommateurs, ces données sont alors calculées par « zone d’intérêt » : nombre de regards, temps de regard, sens de lecture, ordre de découverte, etc.

Il a aussi été remarqué que les utilisateurs on tendance lorsqu’ils « scannent » une page à effectuer tous les même mouvement de balayage en F comme on peut le voir avec l’illustration ci-dessous. Cela se remarque particulièrement sur les pages de résultats de recherche où les informations sont présentées sous forme de blocs de texte superposés : les déplacements du regard ont tendance à composer deux bandes horizontales suivies d’une bande verticale. L’internaute commence par lire le haut du premier contenu (première barre horizontale du F), il descend ensuite dans la page, repère un point d’intérêt et lit un second passage, généralement plus court que le premier (la deuxième barre horizontale) puis il finit de scanner verticalement la page (barre verticale du F).

 

Le balayage visuel en F illustré avec la carte de chaleur (Expérience Alertbox de Nielsen : « F-Shaped Pattern For Reading Web Content »)

Cette méthode permet de mettre en avant l’importance d’une bonne ergonomie. Quelques règles ressortent de ces observations pour concevoir un site web bien pensé :

  • Placez votre logo en haut à gauche de votre page web
  • Placez les contenus importants dans la partie gauche de votre page.
  • La barre de navigation doit être idéalement placée à l’horizontal au dessus des contenus
  • Pensez au parcours de l’oeil en F lorsque vous rédigez des textes et insérez des images dans vos pages, afin d’améliorer leur lisibilité.
  • Les deux premiers paragraphes sont les plus importants, il est inutile de surcharger votre page de textes qui auront peu de chance d’être lus.
  • Mettre en évidence les informations pratiques type numéro de téléphone et adresse.
  • Ne pas mettre d’images trop « lourdes » afin que la page charge rapidement.

En conclusion, pour créer un site web attrayant, il vaut mieux simplifier la navigation en privilégiant une mise en page et un design sobre et épuré, tout en respectant le sens de lecture en F de gauche à droite. À vous de jouer !

Article rédigé par Fanny Koch.

L’utilisation d’un système de gestion de contenu performant, est devenu une condition essentielle à la réussite et l’aboutissement d’un projet Web réussi. Dès lors, le choix du CMS devient un point sur lequel il vaut la peine que les preneurs de décisions se penchent et qu’ils prennent du temps. La grande force de Drupal ? Sa communauté : active et regroupant de plus en plus de membres, elle offre continuellement de nouveaux modules, permettant à chacun d’ajouter de nouvelles fonctionnalités à son application web.

Ces apports sans cesse renouvelés de la communauté ont toutefois leurs limites lorsqu’un besoin bien spécifique est exprimé, il est alors parfois nécessaire de créer de nouveaux modules. Afin de mieux comprendre comment s’articule un module Drupal, et l’architecture logicielle derrière, prenons ici l’exemple d’un module développé récemment au sein de Smart/Origin, permettant une identification en deux temps, soit via nom d’utilisateur, soit via adresse email. L’objectif est ici de demander un nom d’utilisateur ou une adresse mail, de regarder si la chaîne de caractères saisie correspond à un nom d’utilisateur ou à une adresse email associé(e) à un compte existant pour ensuite, dans un second temps, demander un mot de passe avec lequel lancer la procédure de connexion.

Une fonctionnalité d’identification est bien évidemment déjà présente dans ce que peut proposer Drupal : un formulaire demande un nom d’utilisateur et un mot de passe, interroge la base de données avec les informations récupérées et procède, ou non, à l’identification. Vous le savez, un des principes fondamentaux du développement informatique est de ne pas chercher à réinventer la roue, c’est à dire qu’ici il sera bien sûr préférable de se baser sur l’existant, que de partir sur la programmation d’un module de connexion à part entière !

La première étape sera alors d’intervenir dans la génération du formulaire de connexion proposé par Drupal. Le système de hooks nous permet justement de venir modifier le comportement d’un module, à différentes étapes du process, que ce soit lors de la génération des blocks, des menus ou du rendu de la vue par exemple.

Représentation du système de hooks utilisé par Drupal (source : https://www.slideshare.net/tanoshimi/creating-custom-drupal-modules)

 

Commençons donc par la modification du formulaire :

 

 

function two_step_module_form_user_login_alter(&$form, &$form_state){
    $form["#attached"]["js"][] = drupal_get_path('module', 'two_step_module') . '/js/two_step_module.js';
    $form["#attached"]["css"][] = drupal_get_path('module', 'two_step_module') . '/css/two_step_module.css';
    $form["#attributes"]["class"][] = "first-step";
    $form["actions"]["submit"]["#suffix"] = "<div id='bouton_next_step' class='bouton-form-connexion' onclick='next_step()'>Étape suivante</div>
    <div id='bouton_login' class='bouton-form-connexion' onclick='login()'>Se connecter</div>
    <div id='retour-page-login' onclick='retour()'>Retour</div>";
}

Pour mieux comprendre le fonctionnement de ce hook, rappelons que Drupal est très précis sur l’appellation des fonctions car ce nom spécifie directement leur utilisation. Ici, notre module « two_step_module » vient altérer (« alter ») le formulaire user_login(« form_user_login »). Notons qu’ici, la visibilité des boutons et des champs du formulaire sera gérée par les classes CSS « first-step » et « second-step » associées au formulaire.

 

Exemple de formulaire de connexion avec la classe « first-step » associée, masquant notamment le champ de mot de passe.

 

 

Suivons le fil, avec la fonction JS « next_step() » appelée par « Etape suivante » :

 

 

function next_step(){
    //Récupération de la valeur du formulaire
    var user_mail = jQuery("#text-input-user").val();
    //appel ajax
    jQuery.ajax({
        url : Drupal.settings.basePath + 'check_user_mail',
        type : 'POST',
        data : 'user_mail=' + user_mail,
        dataType : 'json',
        success : function(result, statut){
            if(result["status"] === "failure"){
                jQuery("#messages .section").html('<div class="error messages">' + result["message"] + '</div>');
            }
            else{
                jQuery("#text-input-user").val(result["username"]);
                jQuery("#user-login").attr("class","second-step");
            }
        },
        error : function(res, statut, erreur){
            alert(erreur);
        }
  });
}

Nous récupérons alors dans une variable la valeur du champ « user » du formulaire. Pour le moment nous ne savons pas si cette valeur est un nom d’utilisateur ou une adresse mail. C’est pour cela que celle ci est envoyée à l’API « /checkuser_mail » qui fait le travail de vérification et qui nous retourne un résultat au format JSON.

Ce résultat est soit un statut « failure » pour spécifier que la recherche a échouée, soit un nom d’utilisateur valide. Dans ce cas le formulaire passe en mode « second-step », qui masque le champ « user », et affiche le champ du mot de passe ainsi que le bouton submit.

function two_step_module_menu(){
    $items = array();
    $items["check_user_mail"] = array(
        'page callback' => '_two_step_module_check_user_mail',
        'access callback' => true,
        'type' => MENU_CALLBACK,
    );
    return $items;
}

N’oubliez pas d’indiquer à Drupal comment il doit réagir lorsqu’un appel est effectué sur l’url appelée en ajax, « check_user_mail », qui ici nous renvoie vers la fonction « _two_step_module_check_user_mail » (ci-dessus).

function _two_step_module_check_user_mail(){
    $user_mail = $_POST["user_mail"];
    $status = "success";
    $username = "";
    $message = "";
    //on regarde la base de données Drupal
    $result = _two_step_module_check_user_mail_drupal($user_mail);
    if (!$result){
        $status = "failure";
        $message = t("Nom d'utilisateur ou mail non trouvé, merci de vérifier votre saisie");
    }
    else{
        $username = $result;
    }
    header('Content-type:application/json;charset=utf-8');
    print json_encode(array("status" => $status, "username" => $username, "message" => $message));
    return null;
}

La fonction ci-dessus fait ici office de contrôleur, qui récupère la donnée passée en POST lors de notre appel ajax, appelle la fonction qui s’occupera de la vérification (« _two_step_module_check_user_mail_drupal() ») et transmet ensuite le résultat.

 

 

function _two_step_module_check_user_mail_drupal($user_mail){
    //construction de la requête
    $user_name_requete = db_select("users", "u");
    $or_request = db_or()
        ->condition("u.name", $user_mail)
        ->condition("u.mail", $user_mail);
    $user_name_requete->condition($or_request);
    $user_name_requete->fields("u", array("name"));
    //execution de la requête
    $user_name_requete_result = $user_name_requete->execute();
    //traitement du résultat
    foreach($user_name_requete_result as $single_item){
        $user_name = $single_item->name;
        return $user_name;
    }
    return null;
}

Ce qui nous amène à l’interrogation de la base de données en tant que telle, où l’on cherche ici à savoir si un « user » ayant comme paramètre « name » ou « mail » égal à notre variable « $user_mail » existe, et que pour le résultat, seul le champ « name » nous intéresse. Si nous avons un résultat, c’est gagné ! Nous pouvons maintenant retourner ce résultat en tant que « $user_name », car nous sommes alors sûrs que ce que nous avons, c’est le nom d’utilisateur.

Retour donc sur la fonction javascript qui, comme nous l’avons vu, mettra ce nom d’utilisateur en tant que valeur du champ « user », avant de masquer celui-ci et de demander un mot de passe.

 

Formulaire de connexion avec la classe « second-step » associée : nom d’utilisateur validé, en attente de mot de passe.

 

Notre travail de modification est alors terminé car, lors de la validation du formulaire par l’utilisateur, nous retrouvons l’état attendu par Drupal :

• Un nom d’utilisateur dans le champ « user », que celui-ci ait originellement été renseigné avec un nom d’utilisateur ou une adresse mail.

• Le mot de passe associé à ce nom d’utilisateur dans le champ « password ».

Comme vous pouvez le constater, il est possible grâce à ce système que chacun puisse se baser sur une fonctionnalité existante afin de l’adapter à ses desiderata particuliers.

Chez Smart/Origin, nous pensons que l’équilibre d’un tel modèle repose alors sur la participation bi-latérale de chacun. Nous avons donc rendu ce module disponible sur le site de partage communautaire de Drupal, à l’adresse ci-dessous :

https://www.drupal.org/project/ldap_two_steps_login

Le module développé est compatible avec une identification LDAP (https://www.drupal.org/project/ldap), chaque LDAP configuré sera ainsi vérifié si aucun résultat ne ressort de la requête sur la base de données Drupal.

 

Article rédigé par Robin Gueneley.

Après vous avoir présenté les différentes solutions existantes pour la création d’applications mobiles multi-plateformes dans un précédent article. Nous vous proposons dans cette article un retour d’expérience, de certaines solutions pour créer des applications multi-plateformes, appliqué à une problématique technique concrète.

Dans le cadre d’une étude technique récente nous nous sommes demandé comment exécuter du code natif dans le cadre d’une application mobile cross-plateforme.

Qu’entend-t-on par « code natif » ?

Par code natif on entend : un code très souvent développé dans un langage bas niveau (proche de la machine) tel que le C++. Ce type de code est employé principalement pour répondre à des contraintes de performance ou d’accès à des composants spécifiques tels que la mémoire ou la carte graphique. Bien que l’utilisation de code natif soit fréquente lors d’un développement iOS avec le langage Objective-C, cette tendance est peu commune sur Android avec le langage Java.

L’introduction récente par Apple du langage Swift et l’utilisation de Java sur Android tend à limiter l’utilisation de code natif afin de simplifier le développement en déléguant à la machine les problématiques de gestion de la mémoire.

En quoi exécuter du code natif dans une application mobile multi-plateforme est une problématique ?

Cette question est tout à fait légitime car les outils de développement proposés par Google et Apple permettent ce type d’exécution, rien ne semble donc freiner cette possibilité. Cependant dans le cadre d’un développement mobile multi-plateformes l’utilisation d’un Framework tend à organiser le développement autour d’un langage haut niveau, tels que C# ou Javascript, et ce afin de faciliter la génération de code spécifique. C’est pourquoi il est moins trivial d’appeler un code natif lorsque le langage utilisé n’est pas C++.

Indépendamment d’un développement multi plateformes comment développe-t-on du code natif pour mobile ?

Sur la plateforme iOS le code natif se présente de diverses manières il peut être proposé via une librairie dynamique (fichier .dylib), un module objective-C (fichier .mm) ou encore une librairie statique (fichier .a).

Sur Android il faut passer par le Native Development Kit (NDK) pour compiler la librairie en fichier .so (librairie dynamique unix). Ensuite il faut effectuer une liaison (binding) via l’interface java native (JNI) entre la librairie dynamique et le code Java métier.

Ce que l’on a cherché à valider

Lors de notre étude technique nous avons cherché à valider l’exécution de code natif via divers frameworks de développement multi-plateformes (Unity, React-Native et Xamarin). Le code natif que nous avons cherché à exécuter se veut très simple : une fonction qui effectue une somme ou une fonction qui retourne une chaine de caractères. Nous avons chercher à exécuter une fonction simple afin de nous concentrer sur la problématique d’appel.

La fonction est encapsulée dans une librairie native que nous aurons compilée via le compilateur C++ adéquat de la plateforme cible.

 

En pratique

Dans cette section nous allons voir comment nous avons réussi à appeler du code natif à partir des différents frameworks ciblés.

1. Unity

Pour les outils, tout se passe avec les IDE Unity et MonoDevlop.

Unity étant destiné au monde du jeu vidéo, il est donc nécessaire de créer une scene (environnement 3D) associé à un asset de type script (C#).

Ensuite il faut ajouter au projet sous forme d’asset les librairies. Pour Android les fichiers .so dans le dossier Plugins/Android/<ABI>/fichier.so et pour iOS Plugins/iOS/fichier.mm et les configurer comme suis :

 

 

Enfin il suffit de charger la librairie en associant une directive de compilation et une directive P/Invoke.

Une fois les fonctions exposées de manière statique il suffit de les appeler dans le code.

La génération de code JNI est transparente avec Unity, néanmoins la compilation des librairies se fera en dehors du projet.

 

1. React-Native

Au niveau des outils, React-Native ne propose pas d’IDE dédié il faudra passer par un éditeur/IDE supportant au minimum ES6 et au mieux ES6, Java, Objective-C.

Pour React-Native l’appel de code natif sera moins trivial que pour Unity il sera d’abord nécessaire de passer par un outil intermédiaire (Djinni) qui va automatiser la compilation du code C++ et la génération de module (iOS) / code JNI (Android).

Ensuite contrairement à Unity il faudra développer les ponts (bridge/binding) entre le code généré par Djinni et le code généré par React Native.

Enfin dans le code javascript React-Native il suffira de charger le module via le package React-Native NativeModules.

 

 

 

 

 

3. Xamarin

En utilisant la dernière version de Visual Studio (PC/Mac) il suffira de créer un projet Xamarin.Forms afin de cibler plusieurs plateformes mobiles.

A partir de ce projet il sera nécessaire de créer dans chaque sous projet cible créé par Xamarin un DependencyService qui implémente une interface définit dans le projet global Xamarin. C’est ensuite dans les implémentations cibles que l’appel à une librairie native se fera, via une directive P/Invoke. Le projet global lui ne fera que des appels de haut niveau en demandant l’interface et non l’implémentation.

 

La compilation des librairies se fera en dehors du projet Xamarin pour Android, pour iOS il faudra ajouter une directive de compilation au projet.

 

Retour d’expérience

Comme on a pu le voir au cour de ce dernier article nous avons obtenu un résultat concluant sur chacune des plateformes avec tous les frameworks testés.

Pour arriver à un résultat avec Unity il nous aura fallu moins d’un jour, une des difficultés rencontrées a été d’utiliser ce frameworks (et ses outils) dans un contexte indépendant du jeu vidéo.

React-Native est clairement l’exemple le plus clé en main que nous ayons produit lors de cette analyse, la génération du code pour une plateforme cible générant également la librairie dynamique. Cependant cette simplicité est coûteuse en temps de configuration (1.5 jour pour arriver à un résultat), nous avons du créer des bindings parfois complexes pour obtenir un tel résultat. De plus, la documentation étant actuellement limitée, aller plus loin que le simple exemple de faisabilité pourra prendre un temps non négligeable.

Avec Xamarin la réalisation d’un exemple aura été assez rapide (1/2 journée) néanmoins la compilation des librairies iOS avec le projet Xamarin n’a pas été évidente à mettre en oeuvre.

 

Pour aller plus loin

Les projets Unity/React-Native/Xamarin réalisés lors de cette analyse sont disponibles en open source sur notre compte github : https://github.com/smartorigin/Cross-platform-mobile-development-samples N’hésitez pas à les manipuler/tester, des README sont là pour vous aider dans la configuration/prise en main de ces différentes technologies.

Smart/Origin vous accompagne dans la création d’applications mobiles innovantes, de l’étude de faisabilité à la livraison sur les différents store.

 

Article rédigé par Marc-Alexandre Blanchard.

Récemment nous avons été conduits à réaliser une étude sur l’utilisation de code natif dans une application mobile qui cible plusieurs plateformes. Dans cette série de deux articles nous allons revenir sur la notion de développement multi-plateformes mobiles dans un premier article, avant de présenter dans un deuxième article, un retour d’expérience, via divers exemples permettant d’utiliser du code natif dans une application mobile multi-plateformes.

La présentation qui suit ne se veut pas exhaustive, elle présente les points que nous avons jugés clés pour comprendre les principes abordés dans le deuxième article.

Avant de définir ce qu’est une application multi-plateformes rappelons quelles sont les principales plateformes mobiles et lesquelles se doit-on de cibler lors du lancement d’un nouveau produit mobile.

Les principales plateformes mobiles

Le monde de la téléphonie mobile (en 2017) est représenté par deux acteurs principaux qui se partagent la quasi totalité du marché : Google avec Android (87.8% par de marché) et Apple avec iOS (11.5%) (source Gartner Novembre 2016). La force principale des systèmes d’exploitations Android et iOS est leur extensibilité via un écosystème applicatif ouvert aux entreprises et créateurs externes. Ces applications sont alors disponibles via un store (App store pour iOS et Play Store pour Android).

Cette série de deux articles ne traite pas de la plateforme Windows Mobile 10 notamment pour sa faible part de marché (env <1%) mais aussi eut égard de l’aveu d’échec de la part de Microsoft : https://t.co/0CH9TZdIFu https://t.co/ePsySxR3LB

Le développement multi-plateforme

Afin de ne pas réinventer la roue lors de la création d’une application (mobile ou non) lorsqu’on cible plusieurs plateformes il peut être intéressant de passer par un développement multi-plateformes (ou cross-platform). Ce type de développement à l’avantage de factoriser la logique métier et d’abstraire les spécificités de développements propres à chaque plateforme en utilisant un framework (ensemble d’outils pour la création de logiciels). La simplicité gagnée par cette abstraction que propose le framework utilisé pourra conduire dans certains cas au développement de modules spécifiques destinés à combler les lacunes du framework.

Les différentes manières de faire un développement multi-plateforme

1. Full web

La solution la plus simple consiste en la réalisation d’un site web. Toutes les plateformes mobiles disposent d’un navigateur web ainsi il est tout-à-fait possible de créer une application interactive avec les technologies standards du web (HTML/JS/CSS). C’est ainsi que fonctionnent nos produits Cities et Dashboard. Cette solution facilitant le développement présente le désavantage de ne pas pouvoir tirer entièrement partie du support mobile et de certains de ses capteurs : tels que le gyroscope. De plus en passant par un navigateur web le développement hérite de tous les problèmes du développement web : compatibilité sur tous les navigateurs, performances limitées.

 

2. Applications Hybrides

Les applications hybrides sont des applications web développées avec les technologies standards du web mais encapsulées dans une application via une WebView. Cette solution est similaire à la création d’un site web, les problèmes restent les mêmes vu que ces frameworks utilisent les Webview du système sur lequel ils sont déployés. Néanmoins via ces technologies il est possible de développer des modules spécifiques pour proposer des fonctionnalités propres à chaque système.

Parmi les frameworks existants on peut citer : Apache Cordova et Ionic (qui se base sur Apache Cordova)

 

3. Frameworks dédiés au développement multi-plateformes

Cette solution consiste à developper de véritables applications natives via un framework qui va abstraire les spécificités propres à chaque plateforme pour proposer des interfaces logicielles de plus haut niveau. Cette solution présente l’avantage d’abstraire les problématiques de développements propres à chaque plateforme en les réduisant au développement de modules spécifiques.

La solution offrant le plus de liberté pour une développement reste l’utilisation de ce type de framework que ce soit pour les performances ou encore la création de modules spécifiques. Cette liberté se paye par l’utilisation d’outils parfois complexes et la familiarisation avec des frameworks offrant de nombreuses fonctionnalités.

 

 

 

 

Présentation de quelques frameworks dédiés au développement multi-plateformes

Parmi les frameworks dédiés nous allons nous concentrer sur les trois frameworks qui suivent : Unity, Xamarin et React-Native. Nous avons ciblé ces trois framework pour leurs communautés existantes ou grandissantes, leurs supports, leurs utilisations et leurs complexités d’utilisations.

Nous n’aborderons pas les frameworks comme : Qt ou encore Juce qui pourraient aussi répondre au besoin.

1. Unity

Ce framework est principalement dédié à la conception de jeu vidéo, néanmoins il permet de créer des applications multi-plateformes aussi bien mobiles que bureautiques. L’utilisation d’Unity devient vite limitée lorsqu’il est question de créer une application qui n’est pas un jeu, l’IDE étant centré sur des concepts de « scene » et « assets » propres au Jeu vidéo.

2. React-Native

Ce framework, récemment propulsé par Facebook, propose d’utiliser la simplicité d’utilisation de la technologie React pour créer de véritables applications natives. Ainsi en utilisant ES6 et JSX la création se veut simplifiée et permet de profiter des performances et composants des systèmes mobiles. Côtés points faibles, React-Native reste une technologie relativement nouvelle et dispose d’une communauté encore grandissante, d’autre part React-Native hérite de la license propre à Facebook qui spécifie qu’on ne doit pas utiliser cette technologie dans des produits concurrents de Facebook ou assimilés « The license granted hereunder will terminate, automatically and without notice, if you … take a direct financial interest in, any Patent Assertion: (i) against Facebook or any of its subsidiaries or corporate affiliates ». (https://github.com/facebook/react-native/).

3. Xamarin Forms

Désormais racheté par Microsoft, Xamarin grand acteur de l’univers .NET sur plateforme Mono (VM .Net open source) propose la solution Xamarin Forms pour créer des applications Android/iOS/UWP. Pleinement intégré à Visual Studio (Windows ou Mac), Xamarin Forms offre une solution logicielle complète pour créer des applications. Son modèle économique reste le principal frein à son utilisation (voir le pricing Visual Studio).

Dans le prochain article…

La suite de cette article (à paraitre très prochainement) proposera un retour d’expérience via une mise en oeuvre concrète des trois frameworks dédiés au développement multi-plateformes. Le cas présenté sera appliqué à une problématique qu’on peut rencontrer lorsqu’on souhaite proposer une application mobile.

 

Article rédigé par Marc-Alexandre Blanchard.

L’industrie du numérique se développant à grande vitesse ces dernières années, de nouveaux métiers émergent dans ce domaine. Nous allons parler dans cet article du métier de UX / UI Designer, autrement nommé « Designer Ergonome ». Entre UX et UI design, il n’est pas toujours simple de faire la différence, d’autant plus que ces deux concepts sont proches et complémentaires. UX Design signifie User Experience Design, ce qui veut dire en français : Design de l’expérience utilisateur. L’UI Design signifie User Interface Design, en français « Design d’interface utilisateur ».

Comme une image vaut mille mots, reprenons l’exemple de l’iceberg afin d’expliquer au mieux la différence entre UI et UX design.

 

UI DESIGN

L’UI est la partie visible d’un produit : c’est ce que l’on voit, entend, touche lorsque l’on utilise une application mobile par exemple.

Cela permet d’améliorer l’interaction de l’utilisateur avec le produit. C’est une réflexion qui est menée pour toutes les phases de l’utilisation produit, la première étant d’attirer le client.

Le but du design d’interface est de faire en sorte que le client soit à l’aise en interaction, que le système soit fluide, et ergonomique.

Le travail du Designer Ergonome consiste donc à mettre en place un parcours client optimisé et intuitif, un vocabulaire simple et compréhensif, un design soigné et à l’image de l’entreprise, ainsi que proposer des outils qui facilitent les démarches de l’utilisateur. Il faut également déterminer quels outils mettre en place pour favoriser l’engagement.

 

 

 

Le design d’interface intervient donc dans l’aspect visuel d’un site ou d’une application afin de capter l’attention de l’utilisateur et de faire en sorte qu’il soit séduit et reste sur la page s’il en a le besoin. Cependant, l’aspect esthétique ne doit pas prendre le dessus sur le contenu afin d’éviter d’en oublier le but premier de l’interface.

UX DESIGN

L’UX permet aux utilisateurs d’accomplir un ensemble de tâches avec simplicité.

Le designer ergonome se base sur le ressenti d’un utilisateur lorsqu’il est confronté à un site web ou une interface digitale (une application par exemple). En se mettant à la place de l’utilisateur, son but et d’améliorer son parcours et le rendre fluide afin de faciliter sa recherche d’informations.

L’UX design se concentre sur l’aspect émotionnel de l’expérience de l’utilisateur en prenant en compte son sentiment général vis-à-vis du produit, afin de rendre le plus accessible possible les diverses fonctionnalités de ce dernier.

L’UX Designer analyse ce qui attire les utilisateurs, ce qui peut les aider à comprendre le produit ou à l’utiliser.

Dans le domaine du design d’expérience, le design seul ne fonctionne pas sans l’expérience utilisateur.

 

 

Plusieurs principes de bases sont à respecter afin de fournir un travail d’UX design complet :

Accessibilité : il est important de concevoir des sites supportés par les différents terminaux et technologies, systèmes et navigateurs.

Cohérence : le design doit être cohérent dans le choix des graphismes et la réflexion en ergonomie.

Facilité de prise en main : le site ou l’application doit être suffisamment intuitif pour qu’on s’y repère aisément.

Crédibilité : les utilisateurs doivent se sentir rassurés et convaincus.

Efficacité : l’utilisateur doit facilement trouver les réponses à ses questions.

 

POUR CONCLURE

Ce qu’il est important de retenir dans la conception de design d’application ou design web, c’est qu’il faut permettre à l’utilisateur de trouver ce qu’il est venu chercher rapidement et sans difficulté.

Pour ce faire, l’UX Designer doit se concentrer sur l’aspect émotionnel et psychologique de l’expérience utilisateur : il étudie le ressenti tout au long de l’utilisation du produit afin de créer une interface optimale et recherchée.

L’UI Designer quant à lui, se réfère aux éléments pratiques de la création d’interfaces. C’est en cela qu’il est complémentaire à l’UX design, il détient une certaine expertise des outils interactifs.

Chez Smart/Origin, le métier de designer ergonome est utilisé dans la conception des applications géodécisionnelles que nous créons et adaptons selon la demande client.


Une des problématiques récurrentes lorsque l’on rend disponible, pour le grand public, des points d’intérêts (POI) dans son SIG est de leur associer une représentation (symbologie) pertinente. Cette représentation doit être agréable à l’œil sur tous les supports (Outils SIG/ Applications métiers/Sites web) afin de proposer une expérience d’utilisation optimale.

Nous nous sommes confrontés à cette problématique lors de la publication d’un service ArcGIS Online regroupant divers points d’intérêts issus de la plateforme Open Street Map :

https://services.arcgis.com/KuaABtfkgFHV6L3h/arcgis/rest/services/Cannes__OSM/FeatureServer/

 

Par exemple, pour des POI citadins il est important de différencier chaque thématique (lieux touristique, restaurant, mairie…) par une représentation (icône) qui lui est propre. Afin qu’en un coup d’œil l’utilisateur identifie la thématique du point. Il est également nécessaire d’éviter certains petits problèmes techniques récurrents tels que les icônes floues, étirées ou mal centrées. Pour cela il y a quelques astuces à connaître.

 

Astuce n°1 : La Dimension

Tout d’abord il est important de centrer les icônes dans un carré. En effet lors de la création d’un service, ArcMap redimensionne les images non carrées pour les faire rentrer dans un carré.

Plusieurs utilisateurs ont également remarqué que proposer des icônes avec une taille multiple de 4 permet d’éviter les problèmes lors de l’intégration à ArcMap.

 

Astuce n°2 : La Résolution

La résolution des images doit être de 96dpi.

Pour ceux qui créent des icônes avec Adobe Illustrator il y a une astuce supplémentaire à connaître. Adobe Illustrator semble avoir été conçu autour de la résolution 72dpi, ainsi lorsque Adobe Illustrator exporte en 96dpi des artéfacts visuels peuvent apparaître et ainsi rendre l’image floue. Pour pallier à ce problème il est nécessaire d’exporter les icônes avec une résolution de 72dpi depuis Adobe Illustrator et ensuite d’utiliser un autre logiciel, comme Adobe Photoshop, pour réaliser la conversion 72dpi vers 96dpi.

 

 Astuce n°3 : L’Intégration à la plateforme ArcGIS

Du côté de l’intégration à la plateforme ArcGIS, il faut spécifier depuis ArcMap une symbologie de type : « Picture Marker Symbol ».

Quel taille donner au symbol dans ArcMap ?

Cette question vient rapidement à l’esprit car ArcMap demande une taille en ‘points’ or très souvent lorsque l’on crée des icônes on les penses en pixels.

esri fournit la formule suivante pour effectuer la conversion points vers pixels : (taille en pixel de l’icône)x72/96 qui peut être simplifiée en (taille en pixel de l’icône)x0,75. Ainsi un icône de 32x32px aura une taille de 24pt. 

Exemple de configuration (ArcMap) pour une image de 32x32px

 

Note pour les développeurs utilisant l’api ArcGIS for Javascript :

« Une icône publiée avec une résolution de 10pt sera affiché avec une taille de 13px. » (https://developers.arcgis.com/javascript/3/jsapi/featurelayer.html)

 

 Exemple d’intégration

Nous avons intégré le service présenté en début d’article dans notre produit Cities disponible à l’adresse suivante http://cities.test.smart-origin.com/index.html.

Dans cette version, centrée sur la ville de Cannes, vous pourrez visualiser divers points d’intérêts issus d’Open Street Map enrichis de données issues des réseaux sociaux. 

 

 

Pour la réalisation de cet article nous avons également rendu Open Source les icônes du service, elles sont directement utilisables pour vos divers projets : https://github.com/smartorigin/Open-Street-Map-symbology-for-Arcgis-plateform

Il manque une icône pour répondre à tous vos cas d’usage ? N’hésitez pas à prendre contact avec nous à l’adresse suivante : contact@smart-origin.com.

 

Marc-Alexandre Blanchard

 

Ce projet disponible sur notre GitHub, s’appuie sur OSM Buildings, projet réalisé par Jan Marsch pour traiter sous forme de volumes les données issues de la base bâtiments d’OpenStreetMap.

En adaptant ces travaux à un usage dans la plateforme ArcGIS, Smart/Origin propose ainsi une couche en 2,5D.

Cela vient enrichir l’expérience utilisateur en valorisant la représentation des bâtiments représentés sur le fond de plan vectoriel.