Cadorama, un moteur d’idées cadeauxPublié le 20 mai 2011 par eroan dans Webmastering | Aucun commentaire »

Malgré une spécialisation dans le monde du deux-roues, il m’arrive de travailler sur des projets de sites dans des secteurs totalement différents. Depuis quelques semaines, je travaille au développement de Cadorama, un moteur d’idées cadeaux. L’idée est simple puisqu’il s’agit de proposer une sélection de produits pertinente en fonction de critères tels que le sexe, l’âge, les centres d’intérêt et le budget.

Le nom Cadorama a été trouvé suite un un brainstorming et associe de façon courte et plutôt explicite l’idée de « cadeau » et le suffixe grec « orama », qui signifie le tout, l’ensemble. Pour ce projet, nous avons eu la chance d’obtenir le nom de domaine Cadorama.fr, parfaitement adapté puisque le site est uniquement destiné au marché français. Le volet social a été complété par un compte Twitter et une page Facebook.

D’un point de vue technique, le site est hébergé sur l’un de mes serveurs dédiés OVH et tourne sous un CMS maison développé avec php5 côté langage et mysqli côté base de données. Afin d’optimiser le temps de réponse, l’ensemble des requêtes pour l’affichage des produits utilise une classe unique. Le tout est caché sous la forme d’opcode grâce à l’excellent APC Cache. La réactivité est au rendez-vous !

Capture de Cadorama.fr

Côté mise en page, j’ai opté pour du html5 avec une utilisation avancée des fonctions CSS3 : ombres sur les blocs et textes, transparence et coins arrondis. Cela permet d’obtenir une interface colorée et dynamique tout en limitant le poids et le nombre des fichiers CSS et images. J’ai également utilisé la librairie javascript Jquery et son complément Jquery UI (User Interface) afin d’améliorer l’expérience utilisateur.

Cela s’est avéré indispensable pour développer le système de sélection du budget minimum et maximum, qui prend la forme d’une barre horizontale avec 2 curseurs (dit slider). Le but du formulaire étant que chaque section soit configurable en un minimum de clics, aucun élément de formulaire classique (radio ou select) ne permettait de sélectionner une fourchette de budget en seulement 2 clics…

Les fonctionnalités de base ayant été développées, reste maintenant à intégrer d’autres scripts comme le formulaire de contact, le système d’actualités ou encore les commentaires. Je compte également travailler le référencement de façon très pointue afin de rendre Cadorama visible sur les requêtes « idée cadeau » et « cadeau original ». Bref, autant dire que nous n’en sommes qu’au commencement ;)



L’annuaire Moto pratique évoluePublié le 6 février 2011 par eroan dans Webmastering | 2 commentaires »

C’est une pure coïncidence et pourtant, il y a exactement 2 ans qu’est né l’annuaire Moto pratique. Développé à la base avec le script Freeglobes, il a connu 6 mois d’activité florissante avant de sombrer peu à peu dans l’oubli. Peu évolutif, incapable de lutter contre les soumissions spammy et pas du tout ergonomique, le script cms pour annuaires Freeglobes m’avait presque convaincu de laisser tomber définitivement le site.

Pourtant, j’ai découvert en réalisant le référencement de l’un de mes sites un script dont les possibilités me semblaient intéressantes : Arfooo. Plutôt que de « tuer » l’annuaire Moto pratique, j’ai donc décidé de tenter le tout pour le tout en testant ce nouveau cms. Je sais qu’il existe un script de migration de la bdd de Freeglobes vers Arfooo, mais les données contenues dans la base étaient tellement « pauvres » (textes courts, duplications…) que j’ai préféré ne pas les conserver.

Annuaire Moto pratique

Après une installation sans embuches, je me suis lancé dans la personnalisation d’Arfooo et là… bonne surprise ! Non content d’offrir toutes les fonctionnalités dont peut rêver un annuairiste, le script est simple à personnaliser, rapide à charger et parfaitement optimisé pour le référencement. De mon point de vue, Arfooo est aux cms d’annuaires ce que WordPress est aux blogs : le script idéal. L’équipe de développement a vraiment réalisé un travail de grande qualité !

L’annuaire Moto pratique repart donc sur de nouvelles bases, avec une administration simple et compréhensible qui m’évitera de crouler sous les inscriptions inutiles. L’objectif est d’offrir aux responsables de sites sur le thème du deux-roues un véritable annuaire moto SEO, avec des liens en dur sur les fiches et dans les catégories, des liens vers les 5 derniers messages d’un flux RSS et des liens vers une page Facebook et Twitter. Le tout sans publicités et entièrement gratuit.

Si vous avez un site sur le deux-roues, un petit détour par l’annuaire Moto pratique s’impose ;)



Nouvelle version de Scooter SystemPublié le 6 novembre 2010 par eroan dans Webmastering | 1 commentaire »

Et voilà, après 3 mois de développement, la nouvelle version de Scooter System a été lancée le 4 novembre au petit matin. Pour la première fois, l’ensemble su site (portail et forum Vbulletin) a évolué conjointement. Autant dire que la préparation a été minutieuse…

D’un point de vue technique, j’ai profité de cette évolution pour adopter les nouveaux standards du web, à savoir le html5 et le CSS3. Si ces derniers n’en sont qu’à leurs débuts, ils ont permis de simplifier la structure des pages du site (grâce à des balises plus explicites) et le graphisme (ombres, transparence et coins arrondis étant gérés via le CSS).

Du côté javascript, j’ai conservé l’excellent jQuery tout en réécrivant un certain nombre de scripts. Plutôt que de compter sur de lourds plugins, j’ai développé du code spécifiquement pour Scooter System. Bilan, un fichier javascript plus léger qu’avec la version précédente.

Capture de Scooter System

Le graphisme étant allégé, j’ai utilisé des polices d’écriture non standard afin d’apporter une touche graphique aux contenus. J’ai utilisé la propriété CSS @font-face, avec une version de la police d’écriture en TTF et l’autre en EOT. L’ensemble ne pèse guère plus de 40 ko et est correctement interprété par tous les navigateurs du marché, IE compris.

Au niveau développement, tout est toujours codé en php, avec l’utilisation d’une librairie de fonctions très complète. Cette dernière permet notamment d’appeler tous les contenus de la base de données et d’y appliquer une mise en forme différente selon l’emplacement.

Au final, la nouvelle version de Scooter System est plus légère et plus réactive. Les outils Yslow et Google Page Speed lui attribuent d’excellentes notes. Seul point noir, les espaces publicitaires gérés par Google Ad Manager  plombent l’ensemble avec des dizaines d’appels de scripts non optimisés… Dommage !

Découvrez la nouvelle version de Scooter System !



Scooter System et les marques de pièces détachéesPublié le 14 octobre 2010 par eroan dans Webmastering | Aucun commentaire »

Depuis sa création en 2001, Scooter System s’intéresse de près aux pièces détachées adaptables sur les scooters 50cc et mécaboîtes. Si cette relation a débuté avec des actualités, elle s’est concrétisée en 2004 par la création d’un catalogue et comparateur de prix. Ce dernier comprend aujourd’hui plus de 1400 références issues de 200 marques, qu’il s’agisse de pièces moteur ou d’accessoires esthétiques pour le Tuning. Chacune des 1400 fiches proposées est associée à une photo, une description et une note technique. Sans oublier les liens vers les boutiques qui commercialisent les pièces.

Depuis 2 ans, les marques de pièces scooter sont également présentes à travers des pages dynamiques. Ces dernières regroupent non seulement les pièces disponibles dans le catalogue, mais proposent en plus une présentation générale, les dernières actualités publiées ainsi qu’une liste des points de vente en France. J’effectue depuis quelques mois un travail pour rendre ces pages d’avantage visibles dans les moteurs de recherche. Avec les informations de qualité qu’elles proposent, elles sont en effet tout indiquées pour être affichées en 1ère position dans Google.

Quant un site officiel est souvent peu mis à jour et mal traduit, les pages de marques de Scooter System proposent des informations fraîches et correctement rédigées. Quant une boutique ne propose que des descriptions simples (cela dépend bien sur) et un prix unique pour les pièces, le catalogue est une mine d’informations techniques et permet de comparer les prix sur les 20 plus grosses boutiques en ligne. Quant aux autres sites d’information, ils ne proposent pas d’équivalent. Je vous invite à découvrir les pages des marques les plus importantes pour vous en faire votre propre avis :



Ventes privées, le site évoluePublié le 7 mai 2010 par eroan dans Webmastering | 1 commentaire »

Le site Ventes privées.fr existe depuis 2008. Son objectif est de proposer aux non initiés des parrainages vers les sites de ventes privées les plus intéressants, quels qu’en soient le domaine. Une dizaine de liens sont ainsi listés, avec à chaque fois un petit explicatif sur les avantages de la plateforme.

Que vous soyez intéressés par la mode, la high-tech, le vin, la déco ou encore l’électroménager, vous trouverez sur Ventes privées.fr les meilleurs sites de ventes flash, pour réaliser des économies sur vos achats de 25% jusqu’à 75% ! Le site est mis à jour régulièrement pour coller à l’actualité du secteur, particulièrement active !

Bonne visite à tous ;)



La bible du téléphone tactile !Publié le 30 mars 2010 par eroan dans Webmastering | 1 commentaire »

Je profite de la refonte partielle du site TouchMobile pour vous présenter ce dernier. Développé par mon ami Alexandre Filluzeau, le site est spécialisé dans l’actualité et l’information du téléphone tactile. Il propose des contenus pertinents et bien rédigés, sur une thématique technique pas forcément facile à aborder.

Malgré un nombre de fabricants et d’opérateurs mobiles (MVNO notamment) en croissance constante, TouchMobile colle au plus près de l’actualité. Le site propose notamment des bilans réguliers qui permettent de savoir « quel téléphone acheter » à un moment donné.

À côté des actualités quotidiennes, le site possède également un catalogue de téléphones mobiles dotés d’écrans tactiles, qu’il est possible de comparer sur le plan technique. La base de données comprend de nombreux éléments, depuis la résolution de l’écran aux formats vidéos lus en passant par la taille de la mémoire intégrée.

Bref, je n’ai qu’une chose à vous recommander si vous êtes un amateur d’accessoires high-tech : rendez une petite visite à TouchMobile, le spécialiste du téléphone tactile !



Conseils, astuces et outils pour le scooterPublié le 12 mars 2010 par eroan dans Webmastering | Aucun commentaire »

Si le site d’information et d’actualité Scooter System a évolué graphiquement l’an dernier, des évolutions ont également eu lieu du côté de la structure profonde du site. Le nombre de rubriques et d’outils augmentant en permanence, il était en effet nécessaire de revoir la structure et la hiérarchie des différentes sections.

Du côté des marques et acteurs du monde du deux-roues, de nouvelles pages de listing ont fait leur apparition. Elles permettent de retrouver les actualités, produits et informations pratiques pour les principaux fabricants d’accessoires, d’équipements moto et de motos et scooters. Une sorte de guide transversal et dynamique en quelque sorte, à l’image de ce qu’on peut obtenir avec les systèmes de tags.

Du côté du catalogue de pièces scooter, une nouvelle page de listing a également fait son apparition. Elle permet de retrouver plus simplement les pièces moteur et accessoires Tuning en fonction du type de pièces. Le tout est conçu en ajax, pour une navigation simple et rapide. Enfin, la Zone Tuning a elle aussi eu droit à une nouvelle page qui liste les modèles de deux-roues Tuning.

Les pages de listing complètes du catalogue n’ont pour leur part pas évolué, elles permettent toujours de retrouver toutes les pièces détachées et tous les deux-roues, avec une possibilité de filtrage dynamique. Elles sont notamment utilisées pour afficher les dernières mises à jour.

Voilà donc l’objet de mes derniers travaux sur Scooter system ;)



MotorTrends, concept cars, design et tuningPublié le 23 juin 2009 par eroan dans Webmastering | Aucun commentaire »

J’ai toujours été passionné par les beaux véhicules, qu’il s’agisse des scooters dont je parle souvent via Scooter System, des motos que j’évoque aussi régulièrement mais aussi des autos et, plus généralement, de tous les véhicules motorisés.

Je suis depuis plusieurs mois divers flux RSS de sites américains spécialisés dans le design. Ces derniers publient régulièrement des articles sur des concept cars, études de design et autres modélisations 3D de véhicules, et c’est plutôt sympa.

Or, ces sites restent généralement en anglais et traitent du design de façon globale. En lançant un nouveau site nommé Motor Trends, j’ai souhaité regrouper de façon simple et visuelle tous ces concepts sur un unique site, pour les mettre à la portée de tout le monde. Le site propose ainsi de découvrir les dernières tendances en matière de design dans l’automobile, la moto, les bateaux et les avions…

D’un point de vue technique, il fonctionne avec WordPress et utilise le thème Snapshots qui a été modifié esthétiquement et au niveau de certaines fonctions. Il utilise les plugins Akismet, All in One SEO Pack, Lightbox Gallery, Top Level Categories et WP-PageNavi. Le tout est réalisé en css/xhtml pour une accessibilité au top.

Je vous invite donc à aller faire un tour sur Motor Trends afin de le découvrir !

Merci à Annuaire du net pour le lien dans son annuaire !



Le Scooter System nouveau est enfin arrivé !Publié le 22 mars 2009 par eroan dans Webmastering | Aucun commentaire »

Après plusieurs semaines de travail acharné, la nouvelle version de Scooter System est arrivée le 3 Mars 2009. Entièrement refondu, le site a vu son architecture évoluer. Aujourd’hui, les actualités, dossiers et la Zone Tuning constituent le coeur du site. Les dossiers tels que l’assurance scooter, la location scooter ou le scooter d’occasion ont ainsi maintenant droit à une place de choix sur Scooter System !

La partie graphique a quant à elle totalement changé, grâce au superbe travail d’Alexandre Aubert (DoubleA). La largeur est passée en fixe tandis que la couleur de base a évolué vers des tons plus foncés. Le tout est entièrement réalisé en CSS/Xhtml valide. Au passage, de nombreuses fonctionnalités ont été ajoutées au site grâce à l’implémentation de la librairie javascript JQuery !

ss_new_inside

Pour aller plus loin :