10 ans

Voilà maintenant 10 ans que ce site existe (à quelques mois près, toujours mieux que pour la vraie naissance du Geek Communicant). Il est temps de faire un bilan de ces 10 dernières années.

La création du site

J’ai créé ce site en septembre 2012, pour avoir un endroit vraiment à mon nom (en tout cas à mon pseudo) suite à mes 2 ans au sein de l’école Sup de Pub.

À cette époque là je possédais déjà des compétences en HTML (voir mon premier site) et PHP, et même si elles étaient alors relativement basiques, je commençais déjà à me destiner à travailler dans le monde du Web, et quoi de mieux pour montrer ses compétences qu’avoir son propre site ?

Ce fut donc chose faite et partageait alors la nouvelle sur mon premier blog (geekcommunicant.wordpress.com), qui m’a offert une plateforme pour m’aider à me faire reconnaitre.

Créations pour d’autres

En plus de mon propre site, j’ai été amené par la suite à travailler sur plusieurs sites pour d’autres personnes, et tous dans le monde du spectacle – mon père étant comédien et moi-même ayant travaillé en accueil spectateur avec d’autres personnes du monde du spectacle vivant et audiovisuel, mes compétences ont intéressé plusieurs personnes.

Mon premier travail fut la refonte (principalement du back-office) du site du collectif d’acteurs Réciproque. Le back-office est passé de SPIP (qui pour les membres du collectif était difficile à appréhender) à une solution « maison » plus légère. J’en ai également profité pour rajouter quelques effets CCS3 (nouveau à l’époque, et qui depuis a bien évolué) sur la page d’accueil.

Ma deuxième réalisation fut la création du site de la compagnie de théâtre de marionnettes la Compagnie du Manège. Avant que je n’intervienne, la compagnie ne disposait alors que d’une page réalisée en Flash hébergée chez Free, ce qui n’était facile ni pour les mises à jour, ni pour le référencement. Je les ai donc aidés à acquérir leur nom de domaine actuel. Concernant la création du site, je me suis basé sur une maquette réalisée sur Wix. Le site est propulsé par la même installation de MODX que mon propre site, profitant de la capacité multisite du CMS.

Et plus récemment j’ai travaillé sur le site portfolio de la comédienne Gaia Said. Elle disposait déjà d’un site WordPress quand elle a fait appel à moi, mais étant plus à l’aise avec MODX j’ai basculé sur cette solution. La première version du site était classique avec plusieurs pages (galerie, démo, CV…), et dernièrement le site est passé en one page.

Expériences professionnelles

Depuis la création de ce site, j’ai eu plusieurs expériences professionnelles, la première étant mes 6 mois passés chez Yellow Cactus. Au moment de ce contrat décroché suite à une candidature spontanée (et oui, c’est possible) je n’avais alors à ce moment suivi aucune formation attestant mes compétences de développement, mais mes connaissances acquises étaient déjà alors suffisantes pour la majorité des tâches que j’ai eu à faire (création/modification de scripts permettant de retrouver des ressources). Comme je l’ai déjà expliqué sur ce blog, c’est lors de cette expérience que j’ai fait connaissance du CMS MODX.

Mon expérience suivante fut mes deux ans d’alternance chez Groupe GTS. Cette expérience m’a permis (en plus des cours) de renforcer les bonnes bases en développement dont je disposait et de construire dessus. Lors de ces deux ans, le projet principal fut la plateforme de création de sites Yoctown. Le langage back était PHP et j’ai également travaillé sur l’interface avec plusieurs librairies. Lors de ces deux ans, je me suis aussi de nouveau frotté au monde du référencement, suite à la guerre du Gloubipub.

J ‘ai ensuite eu deux expériences consécutives avec l’application d’e-commerce PrestaShop. D’abord du point de vue d’un utilisateur de l’appli (site Moondream) et ensuite d’un développeur d’extensions pour PrestaShop (202 e-commerce).

Par la suite, au sein de l’ESN AFD.Tech, j’ai travaillé chez les trois opérateurs télécom historiques (SFR, Orange et Bouygues Télécom).

Et maintenant, et ce depuis novembre 2020, je travaille chez Clardian/BMI System, éditeur de solutions de mise en conformité pour les laboratoires médicaux.

La suite

En ce qui concerne la suite, seul l’avenir nous le dira. De mon côté, je compte continuer à parler ici de différentes technos à travers de nouveaux tutoriels et expériences.

Le fossoyeur de sites

En fouillant dans un ancien disque dur externe (un dinosaure de 500Go qui a sa propre alimentation) j’ai retrouvé mon premier « vrai » site web, créé quelques années avant ma naissance en tant que Geek Communicant.

Je pensais l’avoir définitivement perdu, sachant que le projet avait été rendu sur un CD gravé, et que j’ai changé plusieurs fois d’ordinateur depuis (sans me rappeler que j’en avais fait une sauvegarde).

Continuer la lecture

Fix phpThumbOf with MODX 3

If like me since you updated to version 3 of MODX your pages using the Extra phpThumbOf are not loading anymore, do not panic, I have found a solution.

Why the problem?

MODX 3 seems to have moved some of its files since phpThumbOf was last updated. The consequence is that the Extra could no more load the library it needs.

Solution

You have to edit 2 files. One is accessible through the manager and the second have to be edited via FTP (or SSH if you have access to your server).

Continuer la lecture

Petit tuto pour les paranos

Bon, cette période d’épidémie de virus (biologique, pas informatique) est aussi une période d’épidémie de fake news.

La dernière en date concerne le formulaire de génération d’attestation de déplacement. Cette rumeur tient au fait que le QR code généré par ce formulaire permettrait de récupérer les données présentes sur votre téléphone.

Continuer la lecture

Carte interactive OpenLayers avec contrôle de calques

Après avoir réalisé une carte historique de la ligne 2 du tramway d’Île-de-France avec Leaflet (voir le tutoriel), je me suis attaqué à la création de cette même carte avec OpenLayers.

Bien que plus complet sur certains points, OpenLayers n’inclus pas nativement deux fonctionnalités utilisées dans la carte :

  • Le contrôle de calques
  • Les tooltips.

Pour le contrôle de calques, j’ai utilisé le plugin ol-layerswitcher de Matt Walker.

Pour les tooltips, j’ai utilisé un overlay et une interaction sur les calques des stations. Le corps du tooltip consiste en une div incluse dans la div de la carte :

<div id="map" style="width: 800px;height: 600px;">
  <div id="tooltip" class="tooltip"></div>
</div>
Continuer la lecture

Carte avec contrôle de calques avec Leaflet

Cette semaine encore, nous allons encore voir la création d’une carte interactive avec la librairie Leaflet.

La carte présentée aujourd’hui utilise les groupes de calques, ainsi que le contrôle de calques, afin de réaliser une carte historique de la ligne 2 du tramway d’Île-de-France.

Bref historique

Afin d’expliquer le découpage des données et les différents calques, un bref historique de la ligne doit être fait.

Jusqu’en 1993, une partie des voies empruntées par la ligne actuelle était exploitée par la SNCF (le tramway actuel est exploité par la RATP) sous le nom de « Ligne de Puteaux à Issy-Plaine ».

En 1997, entre en service le T2, qui empreinte le même parcours, plus une extension au nord. Toutes les stations de l’ancienne ligne sous réutilisées, certaines changeant de nom, et 4 nouvelles sont créées.

En 2006, une section du parcours est déviée.

En 2009, la ligne est prolongée une première fois au sud, avec l’ajout de 4 nouvelles stations.

En 2012, la ligne est prolongée une deuxième fois vers le nord, rajoutant 7 nouvelles stations.

Continuer la lecture

Carte interactive des rues sans mégots avec OpenLayers

Bon, je suppose que vous commencez à avoir l’habitude que je vous présente la manière de créer une carte interactive à l’aide des deux librairies majeures OpenLayers et Leaflet.

Après avoir rapidement créé la carte des rues et sections de rue concernées par l’opération « Des rues sans mégots » avec Leaflet, j’ai bien entendu créé une version avec OpenLayers de cette carte.

Sources des données

Pour cette carte j’utilise le même fichier GeoJSON que pour la carte avec Leaflet :

  • La liste des rues ou sections de rue provient de la page d’actualités de Paris.fr
  • Le tracé des rues a été extrait des données disponibles sur Paris Data.
Continuer la lecture

Carte interactive des rues sans mégots avec Leaflet

Cette carte interactive des rues sans mégots de Paris a été réalisée suite à la suite de la consultation de la page d’actualités de la ville de Paris concernant cette action de propreté, qui ne contenait qu’une image pour présenter la cartographie des différentes rues concernées par cette opération.

Sources des données

La liste des rues ou sections de rues proviennent de la page d’actualités.

Le tracé des rues provient de Paris Data, le site d’open data de la Ville de Paris.

Je suis parti des données en CSV, pour en extraire plus facilement les rues participantes. Pour les rues concernées seulement en partie j’ai ensuite supprimé manuellement les sections inutiles, en passant par geojson.io pour m’assurer que je ne supprimais pas des parties couvertes par l’opération.

Chaque feature de rue a au moins une propriété « name ». Pour les rues ne participant que sur une section je rajoute une propriété « between » pour indiquer cette section.

Ces données ont ensuite été rassemblées dans une FeatureCollection de LineStrings dans un fichier GeoJSON.

Continuer la lecture

Carte interactive du métro de Paris avec OpenLayers

Après vous avoir créé une carte interactive du métro de Paris avec la librairie Leaflet (voir mon précédent article), j’ai décidé de recréer cette carte avec l’autre libraire majeure de cartographie en ligne : OpenLayers (que j’ai déjà utilisée pour ma carte utilisant un fond statique).

Données utilisées

Les données utilisées pour créer cette carte sont les même que pour celle réalisée avec Leaflet :

  • Fond de carte Stamen Toner Lite
  • Tracé des lignes fournis par le STIF sur leur site d’open data : opendata.stif.info
  • Code couleur des lignes fournis par la RATP : data.ratp.fr
  • Coordonnées des stations fournies par le STIF et Wikipédia pour les stations fantômes
  • Logo utilisé comme marqueur de position trouvé sur le site de la RATP
Continuer la lecture

Carte interactive du métro de Paris avec Leaflet

Si on vous parle de solution pour intégrer une carte sur votre site, la première qui vous vient à l’esprit est surement Google Maps. Mais il existe plusieurs solutions open-source et gratuites.

Je vous ai déjà parlé d’OpenLayers, avec laquelle j’ai déjà refait une carte réalisée précédemment avec jQuery.

Mais OpenLayers n’est pas la librairie open-source la plus utilisée. La première place revient à Leaflet (voir sources en fin d’article).

Pour m’exercer, j’ai décider de créer une carte interactive du métro de Paris avec Leaflet.

Éléments utilisés dans la carte

Pour des questions de lisibilité des différentes lignes de métro, j’ai choisi d’utiliser le fond de carte Stamen Toner Lite.

Pour le tracé des lignes, j’ai utilisé des données fournies par le STIF sur opendata.stif.info.

Les codes couleur des différentes lignes proviennent de la RATP sur data.ratp.fr.

Les coordonnées des stations proviennent elles aussi du STIF, et de Wikipédia pour les stations fantômes.

Le logo utilisé comme marqueur de position d’une station provient du site de la RATP.

Continuer la lecture