Conception Web

Vous êtes ici

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.

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

Le site "temporaire" (qui a quand même tenu quelques années) fait enfin place à un vrai site. 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

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 :] ).

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

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.

Site disparu... :-(
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. :)

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.

Site disparu... :-(
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.
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
Un thème visuel créé pour Dotclear (version 1), l'ancien moteur de mon blog.
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

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).

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 !