Conception Web

Vous êtes ici

2023

Refonte de la partie publique du site, sur un graphisme de Gilles Gfeller. Structure hybride : sur une base Drupal, développement sur mesure d'un module VueJs, pour l'affichage dynamique du programme qu'on peut consulter suivant plusieurs axes (films, lieux, dates) directement dans le menu principal.

2022

Un petit jeu "Memory" tout basique, conçu à la suite de mon Wordle·FR, là aussi principalement comme un exercice de SPA en VueJs.

2022

Emporté (comme la moitié de la planète) par le phénomène Wordle de début 2022, je me suis dit qu'il était dommage de ne pas pouvoir y jouer en français, et que cela ferait par ailleurs un exercice de développement intéressant. Je ne suis évidemment pas le seul à y avoir pensé, et ma version est malheureusement sortie une semaine après un autre clone français de Wordle, ce qui explique qu'elle n'ait jamais gagné en viralité. A ce jour, elle compte quand même entre 150 et 200 joueurs quotidiens. Projet VueJs.

2021

Le site de la cave familiale s'enrichit d'un système permettant aux visiteurs de passer commande facilement. Pas (encore) de paiement en ligne étant donné qu'il faut d'abord que le propriétaire valide la commande, mais un système de panier qui affiche les prix et les cartons de manière dynamique. Stockage temporaire des données en localStorage, et possibilité de garder les coordonnées en mémoire pour passer commande plus facilement à l'avenir. VueJs avec un petit backend PHP fait main.

2020

Développement de la partie "front" d'un système de balance en libre-service. Utilisation de VueJs pour réaliser une single-page app utilisable sur écran tactile, qui communique avec un serveur local qui lui-même fait le lien entre base de données, balance et imprimante. Les illustrations sont de moi (basées sur des photos). :)

2020

Réalisation d'un outil permettant aux producteurs qui utilisent des emballages consignés de présenter leur produits et de se mettre en relations avec des distributeurs. Installation Prestashop pour la partie "boutique", et création à 100% de pages complémentaires qui s'interfacent avec la base de données Prestashop afin de s'y intégrer aussi étroitement que possible : page d'accueil, page d'inscription, et carte permettant de visualiser l'emplacement géographique des participants (VueJs + leaflet). Graphismes de Damien Vaney.

2020

Dix ans après la création du site sous Drupal 6, refonte intégrale du site et passage sous Drupal 8, avec migration des données de l'ancien site. Thème responsive créé à partir de zéro, sur un graphisme de Laurence Fleury.

2019

Dans le cadre d'un hackaton de 36 heures organisé par les HUG, (début de) réalisation d'une app hybride visant à informer les gens sur la question des directives anticipées. Travail (quelque peu frénétique !) au sein d'une équipe de huit personnes et notamment aux côté d'un développeur responsable de l'architecture de l'app. L'app n'était évidemment pas terminée au bout des 36 heures, mais s'est avéré suffisamment convaincante pour nous faire remporter l'un des prix du hackaton. \o/

À quelques petits ajustements près, les captures d'écran présentées ici correspondent à l'app telle qu'elle se présentait au bout de ces 36 heures.

Création du logo de l'app (avant le hackaton) et de toute l'interface (HTML, CSS, JS), suivant les guidelines des apps HUG (le but étant que cette app soit intégrée à l'écosystème d'apps des HUG). Le projet n'est pas encore finalisé mais il suit son cours, avec notamment des recherches de financement.

2019

Neuf ans après la mise en service du site Bucher+Walt (voir ici), celui-ci fait peau neuve. Réalisation de toute la partie front (HTML/CSS/JS) sur la base d'un graphisme fourni par le client. La plupart des modules Javascript ont été codés sur mesure : système de recherche avec suggestions riches, panier AJAX, mise à jour automatique des informations du produit en fonction de la variante choisie, visionneuse d'images, etc.

2019

Réalisation intégrale (PHP, MySql, HTML, CSS, JS) d'un petit outil interne qui permet aux membres d'une coopérative de signaler qu'ils ont besoin d'être remplacés à une date et heure donnée, et de répondre à ces demandes. Un email est envoyé aux participants pour les informer des activités liées à leurs demandes.

2018

Refonte d'un mini-site pour une ONG. Installation Drupal 8, car le client était déjà familier avec cette plateforme et souhaitait rester en terrain connu. Création d'un thème personnalisé (responsive), sur la base d'un graphisme pré-existant.

2018

Refonte d'un site vieillissant et éparpillé entre plusieurs plateformes (SPIP, Joomla), désormais réunifié sous une installation Drupal (version 7 en raison du besoin d'avoir un système de quiz, le module correspondant n'ayant alors pas encore été porté sur D8). La grande nouveauté pour cette version du site était la présence d'une carte permettant de localiser géographiquement la présence de diverses malles pédagogiques. Création d'un thème responsive personnalisé.

2017
Refonte du site ("fait main") afin d'utiliser un CMS (Drupal 8) qui permette au client de mettre à jour les contenus plus facilement. Création d'un thème personnalisé. Le design a été repris de l'ancien site.
2017

Réalisation du site pour le bureau d'architectes Clavien Rossier. Installation Drupal 8 avec un thème (évidemment responsive) réalisé en étroite collaboration avec le client. Sur la page Projets, navigation javascript sophistiquée pour faire défiler les images d'un projet (flèches horizontales) et pour passer d'un projet à l'autre (flèches verticales).

2016

Refonte intégrale du site de l'Association Genevoise des Musiciens de Jazz. Installation Drupal, thème personnalisé (basé sur Zen) et optimisé pour mobiles. Graphisme de Guy Vuagnoux.

2016
Site web de l'entreprise de mes parents, depuis reprise par mon frère. Graphisme et codage de moi-même. Les photos sont de mon frère Samuel (propriétaire de la cave). En coulisse, un framework PHP développé par mon autre frère Gil. Travail familial, donc. :)
2015

Réalisation intégrale1 d'un mini-site pour donner accès au programme du festival (plus de 150 événements) ainsi qu'à diverses informations pratiques. En raison de la simplicité des pages (toutes statiques, à l'exception de la fonction de recherche), j'ai opté pour du PHP pur (pas de framework) sans base de données SQL. Les données des événements sont stockées dans un simple tableau PHP, ce qui permet de gérer la recherche et aussi de générer toutes les pages des événements.

Priorité donnée à l'accès sur mobile : le site se présente comme une mini-app, avec menu latéral, onglets, options de tri et recherche. Pour autant, il reste parfaitement utilisable sur des écrans plus grands : grâce à une approche responsive (CSS media-query) il s'adapte automatique à la taille de l'écran.

Utilisation d'une web-font (Material icons de Google) pour l'affichage des icônes.

  • 1. À l'exception de la page "carte interactive", réalisée par un tiers et qui s'est ajoutée en dernière minute.
2015

Refonte complète du site, dont les contenus disparates sont désormais groupés sous une seule et même installation Drupal 7. Voir cet article pour des explications plus détaillées.

Beaucoup de travail, d'amour et de peaufinage au fil des ans. :) L'occasion aussi de faire de nombreuses petites expérimentations sans crainte d'irriter le client (je suis très patient avec moi-même) ou de frustrer les visiteurs (les quoi ?). Notamment : un thème sombre pour les pages de photos, un bouton "distraction-free" sur les articles de blog (si l'écran est suffisamment large), et une visionneuse AJAX pour afficher les images des galeries, afin de rendre la navigation un peu plus réactive et de donner une expérience plus proche d'Instagram.

Thème responsive entièrement fait main, évidemment. Comme les différentes sections du site abritent des contenus assez distincts, j'ai décidé que chacune d'entre elle aurait sa propre couleur dominante (violet pour le blog, orange pour le portfolio, etc). On le voit au niveau du menu principal, mais aussi sur divers éléments d'interface au sein de chaque section (couleur des liens, par exemple).

2014

Conception intégrale d'un outil PHP permettant au client de gérer lui-même les informations affichées sur la page "Team" du site Dakine.ch.

2014

Refonte complète du site (alors sous Joomla) et passage sur Drupal, qui permet de mettre sur pied une structure des données assez complexe, mettant en relation villes, régions, événements et films suivant des règles précises.

Un système de rôles hiérarchiques permet aux villes participants au Festival de mettre à jour elles-mêmes leurs propres informations, sous la supervision d'un ou plusieurs responsables.

2014

Un petit utilitaire développé en PHP, qui remplace l'affichage par défaut du contenu d'un dossier (lorsqu'il est affiché via un navigateur, par exemple en l'absence de fichier index). Le but était d'avoir une meilleure vue d'ensemble des dossiers présents sur mon serveur local (localhost) et de leurs rôles respectifs.

Pour chaque dossier, l'outil permet d'enregister une description, de le mettre en favori, de choisir d'afficher ses sous-dossiers ou non, ou d'exclure ce dossier de l'affichage principal. Ces options sont stockées dans des fichiers ".folderinfos", créés à la racine des dossiers concernés. Les dossiers exclus sont affichés dans une liste séparée, ce qui permet de se concentrer sur les dossiers non-exclus. Les dossiers favoris sont simplement mis en évidence avec un fond jaune, et un filtre javascript permet d'afficher uniquement ceux-ci.

Le système est récursif : les sous-dossiers peuvent à leur tour recevoir le même traitement, jusqu'à une profondeur configurable (5 niveaux par défaut). Afin d'éviter de polluer le disque avec d'innombrables fichiers, les fichiers "folderinfos" sont automatiquement supprimés s'ils ne contiennent aucune information pertinente (donc uniquement les valeurs par défaut). Afin d'éviter tout accident, on ne supprime un fichier que si on parvient à confirmer que son contenu correspond bien à ce qu'on attend.

Cet utilitaire est toujours en développement (c'est en partie un exercice pour moi) et n'est pas disponible publiquement pour l'instant (je n'ai pas encore décidé s'il le sera un jour :] ).

2014

Refonte du (très vieux) site et passage sous Drupal 7.

2013

Un petit outil que j'ai conçu afin de pouvoir comparer les courbes de coût pour les différentes franchises proposées pour l'assurance maladie de base (LAMAL) au sein d'une même assurance. Le but était de pouvoir visualiser quelle franchise serait la plus avantageuse en fonction des frais médicaux prévus pour une année donnée. L'outil permet d'entrer ses propres valeurs et peut donc s'appliquer à n'importe quelle assurance. Utilisation de la bibliothèque Flot pour générer le graphique.

2011

Marché en ligne axé sur les produits de la région, avec possibilité de commande ponctuelle ou d'abonnement sous forme de paniers livrés périodiquement.

Codage HTML/CSS/JS, sur un design de Damien Vaney, la programmation du site étant assurée par mes collègues de hsolutions.

2010

Immense catalogue d'articles nautiques.

Codage HTML/CSS/JS, sur un design de Damien Vaney, la programmation du site étant assurée par mes collègues de hsolutions.

2010

Outil permettant de rechercher un revendeur Dakine à proximité d'un lieu donné (en Suisse).

Design + codage HTML/CSS et (en partie) JS.

2010

Mini-site réalisé pour l'International Music Video Festival Geneva, projet qui n'a malheureusement pas abouti.

Utilisation de javascript pour permettre au visiteur de choisir deux habillages du site (clair ou foncé); un cookie est également utilisé pour garder cette préférence en mémoire.

2009

Sur la base d'un vieux site existant, modifications progressives jusqu'à refonte complète du site lors du changement d'identité visuelle (nouveau logo).

2009 - 2019

Mini-festival consacré à la "mobilité douce", en marge du très (trop ? trop.) fameux Salon de l'Auto.

Réalisation de toutes les éditions jusqu'à ce jour. Les archives des éditions précédentes sont toujours consultables sur le site.

2009

Refonte intégrale du site web du quatuor Terpsycordes, sur un graphisme de Laurence Fleury.

Les exigences du client (site multilingue —originellement en 5 langues, par la suite réduit à 3—, avec calendrier, gestion des images, lecteur audio, etc) me décident à opter pour Drupal, alors en version 6. Mon premier contact avec ce CMS. :)

Note : site entièrement refait depuis, toujours par mes soins (voir Terpsycordes, v2).

2008

Refonte complète d'un site de consulting qui voulait faire peau neuve. (Et qui en avait bien besoin.)

Le logo a été nettoyé au passage. Le reste du code (HTML, CSS, JS) a été entièrement refait. Le site a par ailleurs été optimisé pour pouvoir être imprimé proprement.

2008

Site-vitrine et page de contact de Marie de Piante —cours de soutien scolaire à domicile dans la région genevoise.

2008

La précédente version du présent portfolio. :-)

2008

Initiative lancée par une amie pour protester contre les importations abusives de fruits et légumes hors saison.

Le dessin de la fraise est signé Krum, et le script de la pétition a été utilisé (et adapté) avec la permission de Nicolas Dunand. Pour le reste (conception graphique et codage), c'est moi.

2007
Petite galerie d'images que j'ai conçue en me lançant le défi de prendre "une photo par jour pendant trois semaines". Une photo intéressante, s'entend. Ca n'a l'air de rien, comme ça, mais ça prend un temps fou.
2007
Deuxième version de ma page d'accueil sur s427.ch.
2006

Première version "non-temporaire" de ma page d'accueil sur s427.ch.

Mise en page sophistiquée (un peu trop, avec le recul), entièrement CSS, qui utilise des techniques de positionnement avancées (par pour IE6, donc) et des images PNG avec transparence (pas pour IE6 non plus). Divers hacks CSS ont été utilisés pour que la présentation se dégrade convenablement lorsqu'elle est consultée avec IE6 (testez par vous-même). Et un petit message qui ne s'affiche qu'avec IE6, incitant le visiteur à changer de navigateur et lui donnant un lien vers une page qui explique pourquoi. ^^

2005

Un site tout simple pour le concours de court métrages "Utopies Chroniques", organisé par le Ciné-Club Universitaire de Genève en parallèle du cycle du même nom.

L'image de fond reprend celle du flyer, dessiné par moi-même.

Note technique : utilisation de hacks CSS pour contourner les limitations d'Internet Explorer 6 et lui servir une présentation légèrement différente, moins sophistiquée mais néanmoins correcte. (Ces questions concernent principalement l'image de fond de la page, et ressortent mieux sur des résolutions d'écran de 1024x678 ou moins, ou sur des fenêtres réduites à des dimensions comparables.)

2005

Lancé en 2001, le site CSS Zen Garden se veut une démonstration des possibilités offertes, en matière de présentation et de design, par l'emploi des feuilles de style (CSS) dans une page web. Le principe est simple : chacun peut y aller de sa contribution et proposer au créateur du site sa propre variation visuelle, mais sur un contenu prédéfini et rigoureusement invariable. Autrement dit, le document HTML (XHTML pour être plus précis) reste toujours rigoureusement le même; seul le contenu de la feuille de style (et des images qui y sont éventuellement associées) change.

La créativité des gens n'en est pas bridée pour autant, et les nombreuses contributions retenues pour figurer sur le site explorent des style graphiques variés et contrastés.

"Nuages" est donc ma version du "Jardin Zen des CSS". Je l'ai soumise au site officiel qui ne l'a pas sélectionnée, en raison d'un bug (que je n'avais pas remarqué à l'époque) qui rendait une partie des liens inaccessibles. Ce bug a été corrigé dans la version actuelle. Le site officiel liste néanmoins ma contribution dans les catégories "2 Column", "Black & White" et... "Special Effects". ^^

2005

Conception du site web officiel de l'édition 2005.

La ligne graphique du site se base sur le travail de Marion Jiranek, graphiste responsable de l'affiche de la fête (dont le thème général était "le voyage"). Celle-ci étant absente au moment où j'ai commencé à concevoir le site, je n'ai pas pu obtenir d'images de bonne qualité de sa part, et j'ai donc décidé de dessiner moi-même les éléments décoratifs qui apparaissent dans la marge droite de certaines pages (c'est à dire les deux fleurs mécaniques et la main). L'affiche à l'entrée du site est évidemment l'oeuvre de Marion.

Note technique : tout le site est conforme aux standards XHTML (transitional) et CSS2, à l'exception du "Livre d'Or" que je n'ai pas créé moi-même (j'ai simplement modifié son apparence pour l'intégrer au reste du site).

2005
Un thème visuel créé pour Dotclear (version 1), l'ancien moteur de mon blog.
2004
Un site que j'ai longtemps utilisé pour exposer mes travaux. Vous pouvez toujours le visiter, mais sachez qu'il n'est plus mis à jour.
2003

Celestia est un programme de simulation spatiale en 3D, open-source et donc gratuit, disponible à l'adresse www.shatters.net/celestia/. De nombreuses personnes ont contribué à améliorer et étendre le programme, principalement en créant des add-ons, sous forme d'objets supplémentaires (planètes, étoiles, nébuleuses, galaxies, vaisseaux, etc) ou de textures de meilleure qualité.

Ce site n'est donc pas le site officiel du programme, mais l'initiative d'un ami souhaitant recenser les meilleurs add-ons, et qui fit appel à moi pour créer le visuel de ce site.

2003

A défaut d'avoir participé à la ligne graphique de l'édition 2003, j'ai conçu le site présentant les photographies réalisées avant, pendant et après la fête.

Afin de conserver une unité visuelle avec les flyers et affiches officiels, je me suis basé sur son logo "fleuri" et ses couleurs vives choisies par Céline Mangeat, responsable du graphisme de l'édition 2003.

Il s'agit du premier site web dans lequel j'ai mis en pratique mes connaissances du PHP.

2003

Un long texte (réparti sur 7 pages) qui tente de résumer et de synthétiser les nombreux aspects de ce film très riche.

Je précise au passage que toutes ces idées de ce texte ne sont pas de moi; j'ai plutôt chercher à regrouper de façon cohérente toutes les idées intéressantes que j'ai pu lire ou entendre (ou formuler, pour quelques unes).

Depuis, j'ai rapatrié ce texte sur mon blog (sur une seule page, désormais).

2003

Une page d'accueil "temporaire" (qui a quand même duré, je sais pas, un an ou deux... ?) que j'ai mis sur pied lorsque j'ai migré l'ensemble de mon site sous le nom de domaine s427.ch.

Une page, une seule.

Première apparition du nom "s427", donc... Que d'émotions... Excusez-moi un instant...

2002

Mon tout premier site web, essentiellement du texte, un canular écrit pour me moquer d'un individu particulièrement agaçant qui hantait régulièrement certains groupes de discussion Usenet. Le site s'est enrichi au fil du temps, notamment grâce à diverses contributions de tierces personnes.

Un site aujourd'hui à l'abandon, mais qui, contre toute attente, continue de recevoir son (petit) lot de visiteurs réguliers.

2002

Un site web dont le contenu aurait dû être lapidaire : il s'agissait de donner, chaque mois, une date et un lieu pour permettre aux amateurs des littératures de l'Imaginaire de se rencontrer lors d'un souper, dans une ambiance détendue.

Cela aurait dû être lapidaire... Mais quand on s'amuse il est parfois difficile de s'arrêter !

Mastodon