Mes réalisations web
Le but de cette rubrique est de détailler quelque peu, avec captures d'écrans à l'appui, certaines de mes réalisations. La raison en est simple, il est difficile de montrer tout le travail accompli sur un site en trois lignes sur un CV !Je ne détaillerai ici que les réalisations majeures, si vous voulez toutes les voir, vous pouvez aller voir mes liens, à la rubrique "mes réalisations".
Comme cette page a tendance à s'allonger, j'ai mis mes réalisations plus "anciennes" sur une seconde page.
Carepractice, le Cathéter Veineux CentralNouveau !
Carepractice est un site de formations vidéos sur le Cathéter Veineux Central, créé avec le groupe REDCO-CVC et le service multimédia des HUG.
Ce projet devait permettre une consultation hors-ligne et la version en ligne devait fonctionner sur iPad. Le choix a été fait d'utiliser XHTML/CSS ainsi que Jquery (pour les effets de l'interface : fondus, éléments qui apparaissent durant la lecture des vidéos, etc.) pour permettre un site facilement maintenable. Le tout est propulsé par PHP/MySQL via une interface d'administration.
Afin de répondre aux besoins énoncés ci-dessus, la version en ligne utilise les possibilités des vidéos d'HTML5 afin de fonctionner sur iPad et autres iPhones (même s'il n'est pas prévu à la base pour les smartphones, cela fonctionne !). Une version WebM de chaque vidéo est présente, afin de fonctionner sous les navigateurs modernes (comme Firefox) qui auraient désactivé Javascript (ce dernier permettant de charger des vidéos au format flash).
Un système d'export via PHP permet de rapidement générer une version hors-ligne. Le projet est prévu à terme pour 3 langues, et sera probablement réutilisé pour des projets semblables.
Les captures d'écran montrent la page d'accueil du projet Carepractice en langue francophone ainsi qu'un exemple de l'interface.
CSM SA Nouveau !
CSM SA (Communication Stratégie Marketing) est une agence de conseil en communication et de marketing basée à Genève.
Ce site a été l'occasion d'intégrer 3 graphismes différents et de proposer un site avec une version smartphone via une media-query. L'unique CSS gère :- l'affichage du site classique (3 présentations différentes selon la rubrique choisie),
- la version imprimable,
- et donc l'adaptation aux smartphones.
Particularité de ce site, la plupart des nombreux mais discrets effets créés avec Jquery pour la version classique ne sont pas chargés pour la version smartphone. Cela permet d'éviter de surcharger les petits processeurs des "petits écrans" d'effets non indispensables. Cette technique est gérée côté serveur, en quelque sorte le Javascript est généré via PHP.
Les captures d'écran montrent la page d'accueil du site de CSM… et la même page dans sa version smartphone.
Optimum Sélection Nouveau !
Ce site a été l'occasion de proposer un site avec une version smartphone via une media-query. L'unique fichier CSS (performance oblige) gère bien sûr l'affichage du site classique, ainsi que sa version imprimable, et donc l'adaptation aux smartphones.
Gérer tous les styles via cette media-query et cette unique CSS est un exercice de style intéressant (si j'ose dire), cela permet d'adapter efficacement le design d'un site aux petits écrans, le XHTML s'occupant de la structure. Cette façon de concevoir le site permet d'optimiser les performances du site, sans pour autant sacrifier le design.
Les captures d'écran montrent la page d'accueil du site Optimum Sélection… et la même page dans sa version smartphone.
IAM, Independent Asset Manager
Cette fois, le but du jeu était de rafraîchir le site avec un nouveau graphisme et de nouveaux effets tout en réutilisant les contenus ainsi que l'interface d'administration. Le site utilise PHP pour divers aspects (bandeau, diverses inclusions, gestion multilingue de la CSS, etc.), bien sûr XHTML/CSS pour structurer le contenu ainsi que la présentation, et JQuery et Ajax pour créer les nombreux effets : menus déroulants, effets de fondu, effet de rollover améliorés, etc.
Au final, la refonte est un très bon exemple de site élégant, disposant de nombreux contenus, d'effets modernes… sans pour autant sacrifier les contenus.
Voici deux captures d'écran une de la page d'accueil du site IAM et une des vidéos IAM.
Twist-Advertising, les créatifs associés
Cette fois, le défi était d'intégrer un graphisme original fourni par Twist-Advertising, le tout en ajoutant des effets de transitions depuis la page d'accueil afin de rappeler le "Twist" du nom de l'agence… bien évidemment, sans utiliser Flash.
La technique a été la suivante : tout d'abord, concevoir le site comme un site classique, le faire pleinement fonctionnel sans s'occuper des transitions… et rajouter ces dernières "par-dessus" (via fichiers externes), afin que la personne ayant désactivé Javascript n'ait aucun problème (elle ne verra juste pas les transitions).
Le site, bien que sans interface d'administration, utilise PHP pour divers aspects (bandeau, diverses inclusions, etc.), bien sûr XHTML/CSS pour structurer le contenu ainsi que la présentation, et principalement JQuery et Ajax pour créer les transitions de la page d'accueil, ainsi que les divers effets de "fondu enchaîné" entre les photos sur certaines pages.
Bien qu'il y ait cette surcouche d'animations, le site reste pleinement valide XHTML/CSS !
Ci-contre, voici deux captures d'écran, une de la page d'accueil du site et une de la page montrant les photos de la campagne pour l'horloger suisse Daniel ROTH… qui a valu à Twist-Advertising une récompense prestigieuse : le Prix de la meilleure campagne horlogère 2009.
PNLCoach
Un petit problème se pose pour moi… comment résumer le plus gros projet que j'ai eu en quelques mots ?
Les contraintes étaient les suivantes : l'ancien site, bien que bien conçu, devenait difficile et complexe à gérer à plusieurs, et surtout finissait par manquer d'homogénéité, de part la quantité importante de données, et le "bruit" généré par une gestion presque trop "libre" que l'ancien CMS offrait (ce système était plus adapté à un développeur web). Qui plus est, un rafraichissement technique et graphique était nécessaire, afin de mieux coller à l'esprit et aux codes couleurs des brochures papier, tout en ayant un graphisme plus moderne ainsi qu'un site plus léger.
Le référencement était également critique (un référenceur était de la partie), tout en devant reprendre de nombreux contenus de l'ancien site… ainsi que de nombreuses fonctionnalités de cet ancien site !
D'où la question : comment permettre à Floriane Briefer de gérer son site quasiment seule, tout en prenant en compte toutes ces contraintes ?
La réponse a été simple à énoncer : Floriane ne devait plus gérer la totalité des pages (création, navigation, etc.), mais gérer uniquement son activité (les différentes formations, les calendriers, certains contenus, etc.) et c'est le site qui s'occupera de gérer l'affichage de ces données.
Si le concept peut paraître simple à énoncer, il a été plus compliqué à mettre en oeuvre : restructurer l'architecture du site, repenser le graphisme ainsi que la navigation, prévoir des outils d'administrations plus simples mais tout aussi puissants que les anciens, et surtout… gérer toutes ces contraintes en même temps (parfois antagonistes), sans perdre de vue l'objectif final a été un travail de longue haleine.
Néanmoins, après 3 mois d'intenses efforts, le site tient toutes ses promesses : il gère totalement l'activité de BrieF'R Formations® : les calendriers sont générés dynamiquement, les formations et les sous-formations peuvent être pilotées aisément ainsi que beaucoup d'autres contenus, le code est beaucoup plus moderne et plus léger, le site gagne même un passage à UTF-8 et des pages XHTML/CSS pour la plupart valides.
La réécriture d'adresse (URL rewriting) a permis de tenir les contraintes de référencement.
Le site utilise PHP/MySQL, et bien sûr XHTML/CSS pour structurer le contenu. Jquery a été massivement utilisée pour plusieurs aspects : des animations, des facilités de navigation non-intrusives, des outils d'administrations plus agréables et plus riches, etc.
De fortes doses de Jquery sont venues l'agrémenter, ainsi qu'un système d'édition riche pour les contenus le nécessitant. J'ai ajouté un petit système de gestion de fichiers, un système qui regénère automatiquement la sitemap en fonction des changements effectués, une newsletter plus évoluée, une gestion des droits admin plus fine, etc.
Ci contre, vous avez la page d'accueil de l'interface d'administration.
SCHENKfinance.ch
Le site est disponible en trois langues (français, anglais et allemand), et utilise les technologies habituelles : PHP/XHTML/CSS/UTF-8/Opquast, avec au passage quelques éléments de Jquery pour divers effets (fondus de photos). Le graphisme est fait main sous Photoshop.
Bien évidemment, le site est pleinement valide XHTML/CSS, est-il besoin de le préciser !
Ci-contre, voici une capture d'écran de la page d'accueil de SCHENKfinance (cliquez sur l'image pour l'agrandir).
Profisgest.ch
Le site, bien que sans interface d'administration, utilise PHP pour divers aspects (bandeau, formulaire de contact, etc.), et bien sûr XHTML/CSS pour structurer et mettre en forme le contenu.
L'occasion m'a été donnée de faire une démarche qualité sur ce site, et pour relever ce petit défi, j'ai utilisé l'outil Opquast pour voir ce qui pouvait être amélioré. Surprise pour moi, le site a facilement atteint un score très honorable. D'autres aspects à noter :
- Le site est totalement codé en UTF-8 (pages et CSS),
- Outre les bonnes pratiques Opquast, le site a été testé également avec le RGAA, toujours via l'outil Opquast… et atteint quasiment le sans-faute.
Un Deux Trois.ch (Louisanne Schenk)
Le site, bien que sans interface d'administration, utilise PHP pour divers aspects (bandeau, formulaire de contact, etc.), et bien sûr XHTML/CSS pour structurer le contenu.
Le site est en deux langues (français et allemand), et utilise pas moins de 4 CSS pour en présenter le contenu : une spécifique à la page d'accueil et une autre pour le site en lui-même… le tout multiplié par deux pour les deux langues. L'occasion m'a été donnée d'utiliser les dégradés pour une intégration CSS plutôt réussie !
Bien évidemment, le site est pleinement valide XHTML/CSS, est-il besoin de le préciser !
Ci-contre, voici deux captures d'écran, une de la page d'accueil et une de la page présentant l'approche de la psychologie de Louisanne Schenk (cliquez sur les images pour les agrandir).
Neurofeedback-Romandie
Le site présente tout simplement le concept du Neurofeedback. Il propose également un formulaire de contact (un plan du site, une page d'erreur 404 et 403 sont également disponibles).
Même s'il n'y a pas d'interface d'administration, le site n'est pas exempt de PHP (pour la gestion du bandeau, de la page courante, du formulaire de contact, etc…), et le tout est combiné à XHTML/CSS pour permettre au site de s'adapter à toutes les résolutions… du 800*600 au 1680*1050 de mon écran 20 pouces par exemple !
L'usage des CSS notamment pour le graphisme a permis de faire un site extrêmement léger.
Bien évidemment, le site est pleinement valide XHTML/CSS, est-il besoin de le préciser !
Ci-contre, voici une capture d'écran de la page d'accueil (cliquez sur l'image pour agrandir).
Billards-Baby-Foot-Jeux
Le site est ma troisième boutique en ligne.
Comme le graphisme retenu s'y prétait bien, l'idée a été créer un graphisme complètement "élastique" via XHTML/CSS, et PHP couplé à MySQL ont permis de gérer le côté dynamique des pages (avec beaucoup de liberté pour l'administrateur du site), les produits et leurs catégories, et bien sûr la vente en ligne.
Le graphisme a été fait via Photoshop. Il est également possible de payer ses achats directement en ligne, avec un paiement via Paypal.
Le but principal du projet était de proposer un système facile à gérer et aussi souple que possible… l'administrateur peut par exemple ordonner les catégories de produits à sa guise, et ainsi construire sa boutique comme bon lui semble.
Ci contre, vous avez la page d'accueil de l'interface d'administration.
A noter, cette interface d'administration est entièrement valide XHTML 1 Strict, et les CSS sont également valides !
Katrépices, the Cosy Cooking Factory
Le site en lui-même bien sûr présente l'activité, la boutique… mais surtout permet de gérer l'agenda des cours et les inscriptions.
L'occasion m'a été donnée de tester de nouvelles mises en page via XHTML/CSS, et PHP couplé à MySQL permet de gérer le côté dynamique des pages, les cours, les recettes, certains contenus.
Le graphisme a été fait via Photoshop, et Flash s'occupe des quelques animations. Il est également possible de payer son cours directement en ligne, avec un paiement via Paypal.
A titre personnel, je prends le pari que ce projet prendra vite son essort… si j'en juge par le succès du démarrage et toutes les bonnes idées que Stéphanie et Jeoffrey ont eues pour rendre cet endroit charmant !
La gestion des calendriers a également été revue pour être plus user-friendly.
L'occasion a été donnée d'ouvrir cet outil de "pilotage" du site à d'autres possibilités, par exemple, les version imprimables des recettes au format A5 sont directement générées depuis le site… et sont projetées sur les écrans qui permettent aux participants de suivre la recette.
Ci contre, vous avez un exemple de calendrier pour gérer l'ajout d'un cours, il est possible de sélectionner plusieurs recettes pour créer un cours "menu" par exemple.
A noter, cette interface d'administration est entièrement valide XHTML 1 Strict, et les CSS sont également valides !
Yem.ch, nouvelle version !
Cette refonte a été encore une fois atypique : comme j'étais très pris sur d'autres projets au moment de cette refonte, décision a été prise de confier le site à quelqu'un d'autre.
Une fois de plus, le code résultant d'un célèbre logiciel WYSIWYG et de gros problèmes de pérennité (code effroyable, mises à jours difficiles, problèmes sous divers navigateurs) absolument inacceptables m'ont incité à le refaire moi-même à la main proprement en XHTML/CSS, avec un petit peu de PHP pour accélérer encore les futures mises à jour.
Même si cette refonte n'est pas tombée au moment le plus agréable (beaucoup de boulot), cette nouvelle version m'a permis de m'amuser quelque peu avec les CSS pour tester diverses techniques de positionnement et autres joyeusetés que seul un maniaque des CSS saurait apprécier ! ;-)
Au final, je devais intervenir en tant que simple "consultant", et je me suis retrouvé à tout refaire moi-même…
La moralité de cette histoire : ne confiez pas à un d'autre quelque chose que vous pouvez mieux faire vous-même… vous perdrez moins de temps !
The S.O.C Project !
(que ce soit clair, c'est un outil dont le but est de générer du code, destiné aux développeurs web et non à des personnes débutantes)
Après plusieurs essais, je suis enfin arrivé à quelque chose d'intéressant : le plus gros du travail est fait automatiquement (code des formulaires et génération des requêtes SQL), le tout sans aucune limitation en nombre.
(ça peut gérer des formulaires de 5, 100 ou 2000 champs si besoin est !)
A titre d'info, le projet fonctionne en PHP, et tout est généré "à la volée" (dynamiquement), ce qui me permet d'avoir une source assez légère.
Toutefois, il gère déjà bien les formulaires (en prenant en compte l'accessibilité de ces derniers), les requêtes SQL pour faire intéragir ces formulaires avec des bases de données, le tout dans deux langages (PHP et ASP).
Je me permets de bien insister sur un point : le SOC Project est une version démo d'un projet en cours, qui va fortement évoluer. (le but est qu'il génère quasiment tout seul le code d'une interface d'administration de site). Pour info, une Foire Aux Questions est disponible, et bien sûr de nombreuses améliorations sont prévues. La version en cours est la 0.91, donc on n'est plus très loin de la version "finale" !
Ci-contre, voici 2 captures d'écran, avec un exemple à 2 champs (cliquez sur les images pour agrandir).
Ce site : http://www.nicolas-hoffmann.net/ !
La précédente version incluait déjà (comme quoi l'idée n'est vraiment pas neuve) un système pour skinner le site. Seul problème : le système que j'avais mis en place était extrêmement contraignant pour le graphisme, et loin de refléter ce que j'ai appris point de vue CSS depuis un an.
De plus, le site utilisait des cadres (frames) et des tableaux à profusion, et bien que valide XHTML 1.0, son code était loin d'être un modèle de propreté…
Cette nouvelle version tient toutes ses promesses : elle me permet de garder l'option "skinnage", via l'utilisation massive des CSS, le code (X)HTML5 est beaucoup plus "propre", le site est beaucoup plus évolutif, etc.
A titre d'exemple, le site supporte pas moins de 4 médias (screen, print, projection, handheld), et a plus d'une vingtaine de présentations alternatives différentes.
Si vous essayez de changer de skin, vous vous apercevrez que (presque) rien ne change dans le code, toute la mise en page est gérée grâce aux CSS, ce qui permet une meilleure séparation contenu/mise en page, une meilleure accessibilité, etc…
Je peux sans trop m'avancer dire que ce site est un succès pour moi : le nombre de visites est assez important, c'est une bonne vitrine de ce que je peux faire, et c'est tout simplement plaisant de s'en occuper !
