Compétences :
  • Manipulation d’internet
  • Création de sites & E-marketing (B2B/B2C)
  • Traitement et affichage des bases de données SQL
  • Web applications
  • Référencement et positionnement (Rich snippets & Markup)
  • Responsive Design & Mobile Friendly
  • Interactivité avec d’autres sites/services/réseaux sociaux avec ou sans API.
  • Automatismes (robots) pour e-mails, brochures PDF sur bases des demandes de l'utilisateur, ...
  • E-Commerce - Vente B2B / B2C (sur TPE, Paypal, ...)
  • Interactivité avec l'utilisateur
  • Audits & SEO, analyses SERP
  • Contrôle des machines en interne (Rexec et accès firmwares en UDP)
Langages : PHP, JavaScript & jQuery, CSS3, HTML5 & WebRTC
API : Facebook, Google Suite, Youtube, OneSignal
Framework : Cordova, Wordpress
Site internet autogéré

Le défi fut le suivant : Générer un site de promotion de la musique qui se met à jour en un strict minimum de temps ayant besoin d'un minimum d'intervention manuelle.
Il faut donc un site monté comme un réseau dont la seule base de donnée interne est constituée d'identifiants publics de Facebook, Youtube et BandCamp. De ce fait, la mise à jour n'est (mis à part les articles) qu'une série de requête ajax avec les identifiants dont le retour sera emmagaziné dans une seule ligne de donnée JSON. Ne restera plus qu'aux différentes pages de se nourrir des informations trouvées sur les objets du JSON.
Mission réussie avec "Metal Au Mans", site de promotion de la musique Metal dans l'ouest de la France, qui va garder en mémoire toutes les données des pages, les combiner pour afficher un agenda d'événements d'une meilleure qualité, une carte interactive, une vidéothèque ainsi qu'une "CDthèque".
En effet, la description des événements sur Facebook n'est pas la panacée en matière de communication (voir le diapo). Grâce à ce système qui dispose d'un meilleur affichage sur mobile, l'utilisateur dispose de toutes les informations avec descriptif visuel (vidéo Youtube, lecteur BandCamp, ...).

Pour fidéliser l'utilisateur, il suffira d'ajouter un système de notification personnalisé qui le préviendra en cas d'événements dans sa région.

Langages utilisés : HTML5, CSS3, JavaScript, jQuery, PHP (OOP pour objets Json)

Voir tout le projet ici

Puissance 4 et webcam-kinect

Le défi : construire un jeu pour desktop avec avec une interactivité par les mouvements.
Contrainte : Le seul capteur de mouvement est une webcam.
Résultat concrétisé avec le célèbre Puissance 4 : la webcam fait office de Kinect.

Dans ce jeu, les jetons sont jetés par le dessus. Le joueur doit lever le bras pour indiquer l'endroit où il veut lâcher le jeton. Il suffit donc à la webcam de détecter des mouvements sur la partie supérieure de sa capture, que l'on va découper ici en 7 carrés. En prenant la capture globale et en exagérant les contrastes, on obtient des lignes de contour de l'objet (ici la personne) capturé. En isolant une image à l'instant T et en la comparant à l'image à l'instant T+1, on voit si ces lignes ont changé de position. Si les lignes ont changé de position dans un des 7 carrés, on obtient le carré sélectionné par mouvement et de là on peut lancer une action comme ici faire tomber le jeton. Sauf que dans notre jeu, le lâché de jeton serait trop sensible au mouvement. C'est pourquoi il a nécessité l'ajout d'un "temporisateur" qui est comme un temps de chargement, pour confirmer l'action. Il faut donc faire le mouvement et ne plus bouger pendant un laps de temps pour confirmer le choix.
Ce jeu peut aussi se jouer avec la souris en cliquant sur l'endroit où on veut lâcher le jeton.

Le programme utilise le HTML5 (+WebRTC), le CSS3 et le Javascript.
Les images sont faites sous Illustrator et Photoshop. L'arrière plan est une image de librairie modifiée.
Les jetons ont été remplacés par des pièces de monnaie. Ma fille ayant vu que des reines avaient leur effigie en pièce de monnaie, elle a maintenant sa propre monnaie...

Jeu ludo-éducatif

Ma fille entrait en classe de première année primaire. Son premier devoir était de reconnaître les lettres de l'alphabet dans son cahier. Le problème était que les lettres du cahier étaient classés par ordre alphabétique et de ce fait elle reconnaissait la position de la lettre. Ce n'était plus de la reconnaissance mais du par-coeur.
Problème résolu en 3 heures en scannant son cahier, en découpant les lettre et en les intégrant avec le script JS de speech-to-text "annyang" fourni par TalAter.com

Pour ce jeu, il suffit par exemple de prononcer "lettre A" pour la lettre "A". Pour autant qu'un micro soit connecté à l'appareil et que la page web ait l'autorisation d'accès à votre micro.

Scanner d'entrées

Le défi : Donner la possibilité à une petite association de pouvoir contrôler les tickets d'entrée ainsi que les préventes lors d'événements payants. Le tout sans s'encombrer d'une douchette et d'un support informatique coûteux.
Défi relevé avec MobileScan !.
Cette web application pour mobile permet de scanner les tickets de prévente électronique ou papier, et d'enregistrer les tickets vendus au guichet. Cette application n'a pas été encapsulé volontairement pour plus de flexibilité et pour plus de rapidité d'accès lors d'événements, notamment en cas de rush. Aussi le guichetier n'a peut-être pas le droit d'installer une application sur un mobile ne lui appartenant pas.
Cette réalisation fonctionne grâce à la librairie QuaggaJS et Instascan de Chris Schmich, le tout relié à des requêtes cURL sur un compte de Weezevent.com

Langages utilisés : HTML5 (WebRTC), PHP, JavaScript, CSS3, jQuery

Télécommande Media Center (Web 3.0)

Défi 1 : Faire une télécommande de PC gérant le multimedia sans connexion TCP/IP, ni Telnet, ni UDP pour une installation la plus simple pour un utilisateur lambda.
Défi 2 : Faire un programme distant, dont la source est externe.
Défi 3 : Faire un lecteur Youtube qui s'ouvre automatiquement en plein écran sans pubs intempestives.
Défi 4 : Faire une interface intuitive utilisable par un enfant de 4 ans (qui sera ravi de regarder ses dessin animés sélectionnés par ses parents).

Résultat : MEDIA REMOTE est un système combiné à VLC Media Player qui permet de jouer les médias audio et vidéo présents sur votre PC avec une télécommande qui n'est autre que votre mobile. MEDIA REMOTE vous permet également de jouer les vidéos Youtube à distance.
Facile à installer, l'installation prend 2 minutes chrono. Il suffit juste de s'enregistrer, de télécharger un petit fichier ainsi que l'APK pour le mobile.
La particularité de cette application est qu'elle ne demande aucune configuration des adresses IP de votre ordinateur et n'a pas besoin de serveur et donc n'a pas besoin de configurer votre PC en serveur.
Le système requiert pour l'instant Windows sur votre PC et Android pour le mobile. La partie Youtube est gérée par les favoris de Google Chrome.

Langages utilisés : JavaScript (Constructor,OOA,Ajax), VBScript, jQuery, PHP (Constructor, OOA/Json), Java, DOS pour Cordova/VLC

Amélioration de pages Facebook

Grâce aux onglets Facebook sur les pages, il y a la possibilité de créer de nouvelles fonctions. Ici, sur la page de la Wizard Asso sur Facebook (www.facebook.com/WizardAsso), j'ai pu y ajouter une page Multimedia qui s'auto-alimente par les liens qu'elle (un parseur en fait) y trouve sur les pages d'événements.
La page "Photos Concert" a elle besoin d'un fichier texte externe pour lui indiquer les liens à suivre car ils dépendent d'un compte perso. Si les liens avaient comme cible une page, il aurait été tout à fait possible de créer un système automatisé, grâce à un parseur.
Contrairement aux autres onglets, la page de l'émission "Wizard Kro" est accessible aussi bien par desktop que par mobile grâce à une seule adresse (ici wizard.metalaumans.fr/kro). Dans ce cas présent, il y a eu un recours à un hébergement extérieur pour faire un mini-site (wizard.metalaumans.fr) qui lui est auto-administré grâce à un parseur de données Facebook qui ne nécessite aucune autre application. De ce fait ce mini-site est accessible par tout le monde sans restriction d'inscription quelconque.

Langages utilisés dans Facebook : JavaScript
Langages utilisés sur l'API en externe : PHP (OOA pour objets Json), JavaScript (Constructor & Ajax), CSS, jQuery

Ma plus grosse réalisation : la multinationale américaine Federal Mogul
  • Description : Site international de pièces de rechange automobile
  • Reprise complète du site Internet sur base de lay-out à 4 niveaux
  • Programmation restreinte en HTML, JavaScript et CSS (crainte américaine de hacking sous PHP). Cette programmation copie le système PHP en utilisant les JavaScript de Querystring en méthode GET
  • Reconnaissances de pays d’origine de l’utilisateur permettant d’afficher les informations relatives
  • Conçu en français, anglais, allemand, néerlandais, espagnol, italien, russe et hébreux
  • Egalement conçu pour les pays orientaux (inversion horizontale du site)
  • Retouches des images d’usine, photographies de pièces et retouches photos
Autres réalisations :