Un article qui traite de mini ordinateur Framboise, j’ai nommé le Raspberry qui arrive dans sa 3eme version maintenant, et de mon langage de prédilection, le javascript.
Source : Et si on passait au JavaScript ? | Framboise 314, le Raspberry Pi à la sauce française….
Tout comme Mr Jourdain, qui faisait de la prose sans le savoir, je réalise que je fais de l’#UXDesign au quotidien.
l’ #UXDesign ?
C’est l’expérience utilisateur, ou comment faire en sorte que nos sites internets, applis web et consorts soient agréables, faciles, conviviaux à utiliser. Facile à dire mais moins à faire. Lorsqu’un brief vous tombe dessus, il va falloir bien décortiquer la demande du client, l’enrichir, et proposer des solutions qui prennent en compte les comportements de l’utilisateur du travail de l’agence. Se posent alors beaucoup de questions en fonction du public du site, et de quantité de choses qui sont propres à chaque site. Le travail du Designer UX est de bien comprendre dans quel état d’esprit et de connaissance du monde informatique se trouve son public, pour lui faciliter la tache, et faire du moment qu’il passe avec son ordinateur un moment indolore à minima voir agréable.
Au cours de ces dernières années, j’ai eu à résoudre pas mal de cas concrets d’#UXDesign sans m’en apercevoir. Les modules E-leraning que j’ai conçu devaient proposer des interfaces ludiques mais faciles d’accès, non bloquantes pour l’apprentissage et j’ai du mener mes réflexions dans ce sens. Adobe Flash m’a beaucoup aidé à cette époque de par son apprentissage aisé. L’apprentissage, seul avec un ordinateur demande une grande attention à l’#UXDesign.
Aujourd’hui je poursuis ma route et ma quête de l’interface idéale avec de nouveaux outils, de nouvelles contraintes techniques, mais avec toujours autant de plaisir. HTML/CSS/Javascript a pris la place de Flash, mais c’est surtout javascript qui permet de programmer les comportements de votre site, comme AS3 le faisait du temps de Flash.
A bientôt pour de nouveaux projets.
Une premiere application en cours de #développement en utilisant les technologies #HTML/CSS et surtout javascript pour remplacer #Flash que j’utilisais jusque là pour développer mes #modules de #e-learning. Il s’agit d’un jeu dit ludo-éducatif à destination des scolaires, niveau fin de primaire. J’ai hébergé le résultat de ce travail en cours afin de vous donner un aperçu du résultat. Comme vous pourrez le constater, tout est là : animations, gestion de paramètres élaboré, transitions, scénario pédagogique, … Il vous faudra Chrome dans sa dernière version pour être sur que tout s’affiche correctement. Le projet étant d’utiliser cordova pour compiler pour Android.
L’oiseau magique : Le projet Ludo-éducatif
A cette adresse vous pourrez suivre l’avancée de ce travail. Je vais mettre à jour régulièrement cette page afin que chacun puisse se rendre compte des possibilité de ces technologies. Il rest à terminer ce projet, puis à décliner les possibilités offertes dans d’autres domaines. En effet, ces possibiltés m’ouvre la voie d’animation de présentation de société, d’entreprise, de façon interactive. J’ai bien aussi dans l’idée de profiter de l’occasion pour y intégrer la 3d. À suivre, donc…
Un peu de travail d’animation avec le javascript et voilà le résultat :
http://ruedauvergne.pagesperso-orange.fr/javascript/
Bon, ok. Cela n’a l’air de rien, mais c’est la gestion des balises HTML d’une page que je peux maintenant gérer. Je peux donc déplacer et mettre ou je veux une div, ou n’importe qu’elle balise, changer son contenu, changer sa feuille de style, bref, total contrôle.
Mais ou est l’intérêt ? Eh bien je eux maintenant accéder à ce que je faisais en Flash, créer des bannières animées, des contenus Rich-Médias, etc. Prochain projet : animer mon CV, puis direction #Thélia. Cool…
Vous le verrez par la suite ce travail a été préliminaire de la création d’une application ludo-éducative, pour un client qui vends aux écoles primaires, un jeu pédagogique.
Je profite de la trève estivale pour mettre à jour mes connaissances sur diverses technologies de développement. Et il y a du travail d’apprentissage. Pour l’instant, j’ai absorbé les notions de SCSS / Compass, super outil, très prometteur en terme de développement. J’ai aussi plongé dans le PHP. Là je dois dire que c’est language très intuitif, même si il peut paraître difficile à lire au sein du HTML. Il m’a permis d’optimiser le code sur lequel je travaille de façon assez sympa (externalisation des menus, plus faciles à maintenir). J’en ai profiter pour rentrer dans le vif du sujet des bases de données avec le codage d’un script capable de lire et ajouter des données dans une base, mais aussi remettre cette base à Zéro, l’exporter vers un fichier Excel. Chouette. Le formulaire associé envoie un message et alimente la base. Très pratique pour l’utilisateur. ET puis j’ai commencé à tremper le doigt dans angular JS, approfondi mes connaissances en Javascript. Quoi d’autre ? Ah oui, j’ai aussi fait un petit tour de Foundation. Bootstrap ou Foundation ? je sais pas encore… Enfin j’ai bossé avec CODA 2. Chouette éditeur, sur lequel je commence à prendre mes marques. A suivre, donc.
Et voilà, c’est fait. Le marché de la PAO devenant insupportable j’ai pris une décision : évoluer. Prendre le virage du numérique et le prendre à fond.
1 – Passer un BTS SIO SLAM en VAE
2 – S’inscrire en Licence pro Développement d’applis mobiles (enfin là, on verra parce que c’est un peu cher).
Et puis se relancer via un emploi de développeur, sauf si je trouve un emploi entre temps. Ce qui n’est pas exclu vu que j’ai déjà une expérience là-dedans en autodidacte. Création de site, développement Programmation Orientée Objet en Action Script 3 sous Flash, un peu de javascript. Bref, je profite du temps dégagé pour m’avaler les bases du Java, histoire de faire une corde supplémentaire. Ces derniers temps il faut bien le dire 80% du travail que j’ai trouvé était du développement informatique lié au graphisme, mais bon.
Qu’on se le dise, la com de demain sera numérique et moi je tiens à rester opérationnel, alors…
Je travaille actuellement sur un site internet pour le réseau des missions locales d’Auvergne et mon client, lorsque nous nous sommes vus pour démarrer le projet m’a tenu ce discours : » Attention, nous voulons un site qui ne soit pas là juste pour être joli, il nous faut quelque chose de pratique et fonctionnel, avec une base de données d’utilisateurs et des fonctions de recherche sur une carte ». Le décors était planté. Je vais donc vous décrire les options que j’ai mis en place et comment j’ai répondu à leurs attentes.
De ce côté, il n’y avait pas vraiment d’attentes mais j’ai quand même tenu à fournir un Design Responsiv (qui s’adapte à la taille du terminal sur lequel vous visionnez votre site, smartphone, tablettes, …). Du côté de la charte graphique le travail était assez simple, et consistait essentiellement à reprendre une harmonie colorée. Pour le reste le logo existait et il a suffit de décliner l’ambiance de celui-ci sur les en-têtes.
Page contact avec carte google map de localisation, page actualités, bandeau actus en page d’accueil, sauvegarde de la base de données auto, protection anti-piratage, logos des partenaires, publication d’actus et modération, liens avec les réseaux sociaux, …
Le site s’adresse à des catégories d’utilisateurs très différents, avec des profiles différents et qui cherchent chacun un type d’info précise. Il y a tout d’abord les utilisateurs qui veulent pouvoir identifier la mission locale dont ils dépendent. Pour cela, une rubrique a été crée qui contient une carte cliquable. Cette rubrique permet deux entrée : une entrée par la carte : on clique sur la carte et la page de la mission locale concernée apparaît.
J’ai réalisé cette carte en javascript car le flash que j’utilisais jusqu’alors ne passe pas sur les devise (comprendre les appareils de la marque à la pomme). sur cette carte interactive, si vous survolez une ville, son nom s’affiche en surveillance dans la liste et si vous survolez la liste, sa localisation s’affiche en surbrillance sur la carte.
Dessous un champ permet de taper votre commune et affiche le nom de la mission locale concernée puis vous envoie directement sur la page dédiée.
Pour les techniciens, ce développement est fait en PHP, couplé avec une base de données.
Voilà pour la partie espace jeunes.
La demande était aussi de créer un espace documentaire dans lequel les utilisateurs du site pourrait trouver les documents qui les concernent dans leur travail. Pour cela une architecture en catégories m’a été fournie et j’ai mis en place une arborescence qui permet à chacun, en fonction de son niveau d’accréditation de consulter les documents pour lesquels il a les droits.
Lorsque vous n’avez pas de compte sur le site et que vous vous connectez à l’espace documentaire vous pouvez demander à ce qu’un compte soit créé pour vous, pour cela une fenêtre va prendre vos coordonnées de façon à ce que l’administrateur puisse vérifier votre accréditation et valider votre inscription. De cette façon, il a tout les renseignements pour vous appeler par exemple, mais c’est vous qui avez la main sur votre mot de passe par exemple et l’administrateur n’y a pas accès.
Comme vous le savez, je développe en flash des modules de elearning, qui sont de véritables jeux sérieux (serious games). Mais la techno flash est-elle un choix pérenne ?
Un petit point s’impose. En effet, si vous avez bien suivi, nous sommes dans une période charnière entre le développement multimédia en Flash et celui en HTML5. Jusqu’ici il était assez facile de faire la part des choses : Flash pour le « Rich Média » et HTML pour le tout venant. Oui, mais voilà Apple refuse la technologie Flash sur ses Ipad, et pousse le HTML5 comme technologie de remplacement. Donc, on fait quoi ? On suit ? Eh bien ça n’est pas si simple.
Pour résumer, la question vient de se poser suite à un contact commercial avec une société qui commercialise des jeux pédagogiques à destination des classes primaire. Flash permet plein de choses, c’est un environnement de programmation fantastique et ultra complet, mais propriétaire et le Flash player tend à être de moins en moins supporté par les navigateurs, mobiles, tablettes,… Malgré tout il est présent et compatible avec 90% du parc ordinateurs. HTML5 lui est supporté par les navigateurs récents mais l’emploi de javascript limite son emploi à environ 50% du parc machines. Par contre il est en progression constante.
Bon et moi je développe pour mes clients en quoi ? HTML5+javascript ? ou flash/AS3 ?
La solution que retiennent actuellement la plupart des développeurs d’applications Rich Média est une solution basée sur Flash. Je développe en AS3, puis au lieu de publier mes applis en SWF (format flash), je les publie en éxécutables pour chaque machine via adobe AIR.
Simple non ? un .swf pour le web, un .exe pour les PCs, un format pour Android, un autre pour le mac et tout le monde est satisfait. La compatibilté est maximale et les possibilités sont toujours au rendez-vous. J’évite ainsi la technologie balbutiante Javascript.
Flash tend à devenir la plateforme de développement cross-plateforme idéale. C’est un produit qui évolue d’une technologie web à une technologie plus informatique tradi. Pourquoi pas.
Je vous engage à lire cet article qui détaille bien ce processus :