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.
Twist-Advertising, les créatifs associés Nouveau !
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 Nouveau !
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 impressionnant, comme l'atteste la Déclaration Opquast de Profisgest. 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).
Planète-Eléphant
L'idée est simple : vendre des photos d'éléphants domestiques (Loup est allé en Thaïlande pour les rencontrer, leur expliquer sa démarche et pour prendre les photos), et reverser à leur propriétaire 50% de cette vente.
Le site est en deux langues et utilise PHP/MySQL, et bien sûr XHTML/CSS pour structurer le contenu. Du javascript est également utilisé pour diverses routines (les drapeaux de coeur, etc.).
On ne peut que saluer l'initiative de vouloir aider à protéger cette espèce... espérons que le projet saura prendre son envol !
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 !
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 !
Tech-énergies
Le site présente tout simplement l'activité de la société Tech-énergies, qui est spécialisée dans le génie climatique. 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 combiné à XHTML/CSS, on a au final un contenu plutôt simple à gérer.
Le graphisme du logo et du site (mosaïque d'images, éléments de navigation, titres, etc...) a été fait avec Photoshop, les rollovers ont été mis en place sans utilisation de Javascript, juste en utilisant la technique des portes coulissantes en CSS (pas de préchargement nécessaire, ni de Javascript pour l'image survolée).
Seuls certains choix de couleurs et d'images ont été effectués par le client (charte graphique), pour le reste, j'étais en totale autonomie.
Bien évidemment, le site est pleinement valide XHTML/CSS, est-il besoin de le préciser !
Ci-contre, voici 2 captures d'écran, la page d'accueil et la page de contact (cliquez sur les images pour agrandir).
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 !
Lamarque
La société Lamarque est une jeune entreprise suisse spécialisée dans les cosmétiques dont l'idée première est assez forte : appliquer le principe de précaution en matière de cosmétiques. Autrement dit, d'enlever tous les produits suspectés ou avérés d'avoir un risque cancérigène, allergène, etc... même si la loi les autorise. Louable démarche !
Ce projet est un des plus importants que j'ai eu à gérer, que ce soit par :
- la complexité du site (4 styles CSS alternatifs : un pour chaque catégorie de produits (femme, homme, enfant) et un pour la page d'accueil),
- l'inclusion de deux paiements en ligne (CHF et Euros),
- la gestion multi-langue (français, anglais et allemand pour l'instant),
- et la création d'une procédure complète de paiement/traitement des commandes.
Même les factures sont gérées via des CSS destinées à l'impression !
Les différents graphismes m'ont été fournis, j'ai juste dû les retravailler pour les adapter au site.
Quoi qu'il en soit, je souhaite une bonne chance à cette société, leur démarche de qualité dans leurs produits mérite un grand bravo et devrait faire office d'exemple pour beaucoup de domaines !
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 !
