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 n'en 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".
Vous pouvez retrouver mes réalisations web plus récentes sur la page principale des réalisations web.
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).
Le Chantier Naval Jacquot-Descombes
Le site présente tout simplement l'activité du chantier naval, et propose 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 client peut le mettre à jour tout seul en éditant directement les fichiers .php).
Le concept de séparation structure/présentation des standards prend tout son intérêt dans ce cas !
Le graphisme 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).
L'occasion a également été donnée d'améliorer mon classique formulaire de contact, notamment via une utilisation un peu plus "avancée" de Javascript : si un champ n'est pas valide, le Javascript détecte le champ problématique, encadre en rouge ledit champ, et remet le curseur (focus) sur ce champ.
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 "Logistique" (cliquez sur les images pour agrandir, le site n'est plus en ligne).
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 !
JKreation
JKreation est une société spécialisée dans la bijouterie et l'artisanat d'Afrique de qualité.
De très nombreux produits sont disponibles, tout l'art du site a d'ailleurs été de les "catégoriser", et de faire un système pratique sur le site public pour permettre à l'internaute de facilement s'orienter dans l'offre disponible.
Le site est realisé entièrement en PHP/XHTML/CSS, la principale idée était d'offrir un moteur robuste et facilement évolutif, afin de pouvoir gérer au mieux toute l'activité de la boutique.
L'intégration d'un paiement en ligne via Paypal, la gestion des produits, la création du moteur du site, l'intégration d'une procédure complète de paiement, etc... ont rendu ce projet particulièrement intéressant.
Le graphisme a été fait sous Photoshop, et l'intégration via XHTML/CSS a permis de proposer un site assez léger et agréable à consulter (cliquez sur les images pour les agrandir, le site n'est plus en ligne).
Le contenu de certaines pages, les commandes, les produits, les catégories desdits produits, etc... sont tous pilotables.
Je vous laisse jeter un oeil à la première capture, histoire que vous vous fassiez votre propre idée !
Le système de gestion des catégories des produits est inspiré de celui de Sophie Basso, mais poussé encore plus loin ! La 2ème capture montre ce système (3 niveaux de catégories/sous-catégories, toutes ordonnables et pilotables à souhait).
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 !
Sophie's Art
Le moins qu'on puisse dire, c'est que son style de photographie est assez éclectique : courses automobiles, requins, business, portraits...
Le site est realisé entièrement en PHP/XHTML/CSS, la principale idée était de faire un site très léger, avec peu de fioritures graphiques.
Bien sûr, l'utilisation des CSS a permis de réduire le poids des pages au strict minimum, afin d'avoir un site très rapide à l'affichage.
A noter, le site est disponible en anglais et en français.
J'en profite pour la saluer au passage, c'est une personne débordant d'énergie et très sympathique !
Je suis particulièrement content du système de gestion des galeries et des sous-galeries, Sophie peut les ordonner à sa guise, en créer autant qu'elle le désire, la 2ème capture montre ce système.
Ensuite chaque galerie ou sous-galerie peut recevoir des photographies à loisir !
Comme toujours, cette interface d'administration est faite à grands renforts de CSS, histoire d'avoir un système très léger et rapide.
Je vous laisse jeter un oeil à la première capture, histoire que vous vous fassiez votre propre idée !
A noter, cette interface d'administration est entièrement valide XHTML 1 Strict, et les CSS sont également valides !
Brands2com
L'idée a donc été de centraliser toutes ces informations sur un site, et de permettre à quelques "grands comptes" (de grandes sociétés qui ont beaucoup de marques déposées) de s'acheter/vendre plus aisément des marques entre elles.
Côté technique, nous utilisons du XHTML/CSS pour la mise en page, PHP pour manipuler la base de données, et une forte dose de Javascript/DOM vient soulager le moteur du site afin de ne pas trop solliciter le serveur. Le graphisme a été fait sous Photoshop ainsi que les différents logos.
Le site bien que parfaitement fonctionnel n'est pas encore disponible en ligne, mais gageons qu'il le sera très prochainement !
D'autres fonctionnalités ont été ajoutées, notamment la gestion d'accès à plusieurs niveaux (site et administration), la possibilité de piloter d'autres parties, etc... font de cette interface d'administration une des plus intéressantes que j'ai eu à programmer.
A noter, cette interface d'administration est entièrement valide XHTML 1 Strict, et les CSS sont également valides !
Club-DVD.ch
Il fallait remettre tout le système au goût du jour, la seule contrainte était de repartir de la base de données existante. Pour information, le site utilise une base de données Access, et utilise donc l'ASP en guise de langage de web "dynamique".
Tout le but du jeu a donc été de reprendre l'"efficacité" de l'ancien site, tout en le parant d'un graphisme plus moderne, et d'une structure plus agréable à la navigation.
Au final, le site est l'une de mes meilleures réalisations actuelles, que ce soit :
- d'un point de vue technique (en XHTML/CSS valide généré via de l'ASP, avec des éléments en Flash, une base de données derrière, et le tout parfaitement accessible, que l'on ait un plugin Flash ou non),
- d'un point de vue graphisme (Photoshop 7 et Flash MX, avec un design s'adaptant à la résolution du navigateur),
- du côté ergonomique (le site est très accessible, en 2 langues changeables en un clic de souris, où que l'on soit sur le site, on peut toujours louer un film en 3 clics),
- et tout simplement de l'utilisation : le site est en production depuis 3 ans, et fonctionne à merveille depuis !
Je ne vais pas détailler toutes les rubriques, jetez un oeil à cette capture d'écran (cliquez sur l'image pour l'agrandir) pour vous faire une idée.
Go-File
Un ancien site avait été fait, mais l'accessibilité et les standards n'avaient pas été pris en compte, et divers bugs de fonctionnement gênaient (bref, une bonne idée un peu baclée). La refonte a donné l'occasion :
- De débugger le moteur ainsi que le fonctionnement du site,
- de faire une refonte graphique plus au goût du jour,
- et au passage de moderniser le code du site (XHTML/CSS) et de prendre en compte l'accessibilité et l'ergonomie !
Le projet est a été plusieurs fois amélioré (notamment la partie d'administration du site), diverses fonctionnalités ont être ajoutées pour les clients.
Au final, après une refonte de tous les dangers car très étalée au niveau du temps, ce site reste une des intégrations CSS les plus intéressantes que j'ai fait, le joli graphisme allié à l'utilisation des standards donnent un site plutôt réussi ! (le site est bilingue)
Yem.ch (précédente version)
Cette refonte a été un peu atypique : le site ainsi que son graphisme avaient été faits à la va-vite, notamment via un logiciel WYSIWYG pour l'intégration et une optimisation toute relative côté graphisme. En a résulté un code source assez immonde, ainsi que divers bugs d'intégration (notamment sous Firefox), ainsi qu'un menu fait en flash complètement inaccessible.
Comme il était inacceptable que le site de ma propre boîte ne soit pas codé avec l'art et la manière, j'ai quelque peu refondu le graphisme et complètement réintégré le tout via XHTML/CSS, avec un petit peu de PHP au passage.
Au final, le site passe d'un menu Flash à un menu full-CSS utilisant les portes coulissantes afin de ne pas avoir de préchargement intempestif, les bugs d'affichage ont été solutionnés, le site a gagné en propreté de code et en accessibilité (ainsi qu'une page 404 et 403 au passage), les animations Flash restantes ont été intégrées de manière accessible (via la méthode Satay), et le site m'a permis d'expérimenter les pseudo-frames pour le contenu des pages.
Plus propre, plus léger donc plus rapide, plus beau, plus accessible, que demande le peuple ? ;-)
Ergologique
Ma participation à la refonte d'Ergologique s'est faite sur ce que l'on peut appeler "un coup de grogne" : l'ancienne version du site avait eu droit à un petit coup de pub par Tristan Nitot sur son célèbre Standblog, c'est là que j'ai découvert ce site, j'ai d'ailleurs trouvé ce dernier particulièrement intéressant (contenu pointu et de qualité).
Toutefois, quelques commentaires désagréables ont descendu Ergologique, juste sur le fait que son code source n'était pas valide, etc. (le site était conçu via des tableaux, à "l'ancienne méthode", ce qui n'enlevait rien à la qualité du contenu du site).
Ces commentaires m'ont un peu peu mis en rogne (la critique est facile... quand on ne fait rien), et j'ai proposé mon aide pour la refonte, qu'Emeric Thoa (le concepteur du site) a acceptée.
Mon rôle a été simple : créer un squelette XHTML/CSS en partant du graphisme de la nouvelle version qui m'a été fourni (la version actuelle), en essayant de respecter au mieux les envies d'Emeric (disposition, etc.).
Au final, grâce à l'énorme travail de l'équipe du site et plus particulièrement d'Emeric (refonte de tout le site, et il y avait de quoi faire !), Ergologique s'offre une belle cure de jouvence, cette nouvelle version est une vraie réussite : le site est beau, fonctionnel, léger, et le contenu est et reste de grande qualité.
Une adresse à retenir !
Fabiennemuller.ch
Ce site est realisé entièrement en PHP/XHTML/CSS, la principale contrainte était de faire un site très léger, avec peu de fioritures graphiques.
Le graphisme était imposé, je n'ai donc pas eu à le créer, seul comptaient la légèreté et la simplicité. Bien sûr, l'emploi massif de CSS a permis de réduire le poids des pages au strict minimum, c'est donc le poids des photographies qui font celui de la page, et non la page qui restreint le nombre de photos.
Quant au contenu, comme il est entièrement administrable et administré par le client, je n'ai pas eu à le créer !
Les ajouts/modifications/suppressions de photos sont faits automatiquement (l'utilisateur de l'admin n'a pas à se soucier de savoir comment cela fonctionne), les factures se font rapidement, et sont imprimables directement en ligne, bref tout est fait pour une efficacité maximale.
A noter, cette interface d'administration est entièrement valide XHTML 1 Strict,