E-boutique Arthur & Aston

27 octobre 2015 / in / by Chris Letellier

Développeur Web E-boutique Arthur et Aston

E-boutique Arthur & Aston – Maroquinerie

Arthur & Aston est une entreprise spécialisée dans la maroquinerie pour Femmes et Hommes. Nous y trouvons des Sacs, de la petite maroquinerie et des accessoires de différentes couleurs et matières

A & A est un site e-commerce Prestashop réalisé chez Schuller Graphic.

Arthur & Aston avait un site vitrine E-majine présentant leur produit de maroquinerie pour Femmes et Hommes où nous changeons les collections tous les 6 mois. Mais il avait aussi un site e-commerce fait sous Prestashop. Ce site a été fait par une autre agence de communication. Arthur et Aston a décidé de nous confier leur site e-commerce Prestashop. Elle nous a imposé de mettre la même charte graphique que leur site E-majine et de le mettre Responsive.

Transfert :

L’agence de communication m’a donc transféré tout le site e-commerce en FTP et la base de données en SQL. J’ai donc installé ceux-ci sur un de nos serveurs privés.

J’ai commencé par changer tous les liens en base de données http://laboutique.arthur-aston.com par htpp://eboutique.arthur-aston.com car le site e-commerce était sous le nom de domaine http://laboutique.arthur-aston.com et le nom de domaine http://www.arthur-aston.com restait pour le site vitrine en E-majine le temps des modifications du site e-commerce Prestashop.

Ensuite, j’ai fait la mise à jour de Prestashop en le passant de la version 1.5 à 1.6. J’ai aussi fait la mise à jour des différents modules présents sur le site e-commerce Arthur & Aston. J’ai installé d’autres modules tels que les Cartes Cadeaux, Mondial Relay…

Réalisation :

J’ai testé le Responsive de Prestashop qui ne me plaisait pas. J’ai donc décidé de prendre foundation pour mettre le site Arthur & Aston en Responsive et de prendre aussi la fonction menu de foundation.

Ensuite, J’ai donc intégré le site e-commerce suivant la maquette sur 12 colonnes. J’ai commencé par faire créer un header simple sur 3 colonnes, la page d’accueil avec 2 images des catégories Femmes et Hommes et le footer composé de liens.

Ensuite, je me suis attaqué aux catégories. Pour une catégorie qui n’a pas de produit, mais qui a des sous-catégories, j’enlève la leftbar et j’affiche les PLV des sous-catégories sur 4 colonnes. Pour les catégories ayant des produits, j’affiche la leftbar et les produits sur 2 colonnes. Dans cette leftbar, j’affiche le nom de la catégorie et sa PLV associée, un ensemble de lien de navigation entre les catégories et des réseaux sociaux. Ensuite nous avons deux sections de recherche : la première native de Prestashop et l’autre provenant du module Advanced Search 4. J’ai intégré les modules Produits déjà visionnés et Achat de Carte Cadeau. Pour afficher la fiche Produit, nous avons décidé de l’afficher en fancybox sur 2 colonnes.

Pour le menu Arthur & Aston,j’ai créé 1 bloc différent pour la section Femmes et la section Hommes. Ces blocs sont remplis en jQuery grâce au menu natif de Prestashop. Ensuite, j’ai inclus en haut du menu le logo Arthur & Aston, le bloc Mon Compte et le Panier. Sur la dernière colonne de chaque menu, j’ai intégré le moteur de recherche Advanced Search 4.

Développements avant ouverture :

J’ai extrait de notre site E-majine, les magasins Arthur & Aston, je les ai géolocalisés grâce à l’Api Google Map V3 et je les ai injectés dans Prestashop.

Pour l’ouverture du site, j’ai du remettre à jour la base de données des commandes et des clients, associé le nom de domaine A & A

Construction HBC

1 octobre 2015 / in / by Chris Letellier

Développeur Web HBC Habitat Basse Consommation

Construction HBC – Habitat Basse Consommation

Construction HBC avait un site de présentation de leur société en Izi-média où il présentait leurs maisons individuelles et leur terrain à Caen. Ils nous ont sollicités pour la refonte de leur site web et en même temps trouvé une solution plus simple pour la présentation de leurs maisons.

HBC est un site de présentation de maisons et terrains en E-majine par Médialibs réalisé chez Schuller Graphic.

Réalisation :

Nous leur avons donc proposé un site de présentation en E-majine. Nous leur avons demandé ce qui était spécifique à leurs maisons.

Tout d’abord, à partir de ses informations, nous avons créé une fiche produit spécifique avec de champs spécifiques :

la référence,
la ville en titre,
une description,
une photo principale,
le nombre de chambre,
la surface,
le type de maison individuelle,
le prix et la classe énergétique.

Puis, la page d’accueil est une remontée d’informations : présentation des nouvelles maisons individuelles en slider, un moteur de recherche, une pré-sélection de maisons individuelles, une map remontant les dernières offres de maisons dans le secteur de Caen et une remontée des dernières actualités.

Ensuite, le moteur de recherche de la page d’accueil de Construction HBC est composé comme le moteur de recherche d’Eco-Maison des champs : Nombre de chambre, Surface, Type. Mais nous avons dû ajouté la localité et un champs Rayon. Donc, pour ce moteur, les maisons doivent être géolocalisées.

Nous sommes donc parti du modèle Eco-Maisons qui appartient au Construction HBC. Nous trouvons dans le header du site un menu complet, le numéro de téléphone de Construction HBC et un bouton Demande de Devis.

Enfin, sur la fiche produit, le client désirait un bouton Demande de devis. Ce bouton renvoie donc vers le formulaire de contact. J’envoie la référence de la maison individuelle, ce qui permet à Eco-maisons de connaître sur quelle maison l’internaute est intéressé.

David Berthout

23 juillet 2015 / in / by Chris Letellier

David Berthout – Menuisier Plaquiste en Creuse

David Berthout est un Menuisier – Plaquiste en Creuse. Étant un ami, je lui avais fait en 2010 des cartes de visite pour ses clients. Mais aussi des plaquettes et cahier de présentation pour donner aux architectes sur la Creuse, Limoges et Châteauroux. Il a fait évolué son entreprise depuis 2010 et m’a demandé de lui faire un site internet. Celui-ci pour présenter son entreprise et ses compétences.

Le site David Berthout est un site de présentation de sa société de Menuisier Plaquiste en WordPress.

J’ai donc installé un WordPress et choisi un thème responsive. Grâce à ce thème, je n’ai pas été obligé de faire trop de CSS. De plus, j’ai installé les modules principaux à WordPress tels que le Formulaire de Contact, le Slider et le SEO pour le référencement. Une fois la structure faite, j’ai demandé à David Berthout ce qu’il voulait principalement sur son site et s’il avait des photos de ses réalisations en tant que Menuisier Plaquiste en Creuse.

J’ai donc sectionné son site par corps de métier (Présentation, Isolation / Placo, Menuiserie, Parquets / Lambris, Contact). Ensuite j’ai entré le contenu de chaque page en mettant un minimum de texte correspondant à ses compétences, un lien vers la page Contact pour une demande de renseignement ou de devis et une galerie d’images. J’ai essayé de faire un bon travail sur le référencement pour être référencé en Creuse en tant que plaquiste.

Enfin, j’ai montré le site à David Berthout dont ses retours étaient bon. J’ai donc ouvert le site, inséré Google Analytics au site et envoyé le sitemap au Webmaster Tools. Je vous laisse donc découvrir un site simple en graphisme, très épuré mais surtout montrant les compétences et les réalisations de David Berthout – Plaquiste – Menuisier en Creuse.

Flobike

25 juin 2015 / in / by Chris Letellier

Flobike – Aquabike à Granville dans la Manche(50)

Flobike est un centre Aquabike qui se trouve à Granville dans la Manche (50). Aquabike peut servir comme Kinésithérapie ou Thalassothérapie, cela est très bon pour la santé, le bien être et l’amincissement. C’est une remise en forme et du sport pour débutants ou non. Flobike nous a donc contacté pour lui faire un site Internet pour la présentation de l’Aquabike à Granville.

Le site Flobike est un site de présentation responsive en WordPress réalisé dans l’agence Schuller Graphic.

Réalisation :

Mon collègue a commencé par installer WordPress et les modules tels que Formulaire de Contact, Slider, un module SEO. Ensuite, il a stylé grâce à du CSS. Il a créé le menu et les pages dont il a rentré un minimum de contenu. Pour la page d’accueil, il a inséré un slider avec une vidéo que le photographe de Schuller Graphic avait effectuée à Flobike à Granville.

Ensuite, mes collègues en PAO m’ont envoyé la plaquette de Flobike qu’ils avaient réalisé en PDF. Cela m’a permis de rentrer le contenu sur le site de Flobike, aussi bien le texte que les images. J’ai donc fait attention à rentrer le contenu pour que le site Flobike soit responsive, je me suis basé sur les colonnes du thème et dans certains cas j’ai dû utiliser du CSS pour agrandir ou réduire les textes ou afficher ou non les images suivant la résolution d’écran. J’ai inséré en bas de la page d’accueil 3 extraits de Vidéos montrant l’Aquabike suivant le niveau des personnes.

Enfin, on m’a demandé d’inclure sur le site une sorte de Widget avec leur numéro de téléphone et les qualités de l’Aquabike tels que Modèle Breveté et Fabriqué en France. J’ai donc dû créer 2 div en HTML avec les images et le téléphone en texte. Puis en CSS et en jQuery, faire apparaître l’une ou l’autre div suivant sur quelle résolution est-on.

Éditions Ypypyp

24 juin 2015 / in / by Chris Letellier

Éditions Ypypyp – Vente de fiches pratiques pour devenir autonome

Les Éditions Ypypyp nous ont contactés pour leur créer un site Web. Celui-ci pour montrer leur activité et vendre les fiches pour devenir autonome. Les Éditions Ypypyp est un éditeur engagé sur la thématique de l’autonomie. Cette société est créé par Yvan Saint-Jours et Philippe Pellan :

Yvan Saint-Jours qui est chef spécialiste de l’écoconstruction,
Philippe Pellan paysagiste-jardinier créateur d’écosystèmes naturels

Le site Éditions Ypypyp est un site e-commerce responsive en WordPress réalisé dans l’agence Schuller Graphic.

Réalisation :

Tout d’abord, nous avons commencé par installer le WordPress avec un thème. Puis installer WooCommerce pour la vente en ligne des fiches DIY des Éditions Ypypyp. Puis, nous avons installé des modules tels que :

Contact Form 7 pour la création de formulaire avec le module Really Simple CAPTCHA,
le module Revolution Slider pour la page d’accueil,
WP Super Cache pour la rapidité du site,
Advanced Custom Fields pour permettre de créer des champs personnalisables aux fiches produits,
Yoast SEO pour le référencement du site.

Puis, nous avons structuré le site avec une page d’accueil qui contient un slider, les dernières parutions et une remonté du blog. Ensuite, nous avons une page de présentation des Éditions Ypypyp, une page concernant les auteurs des fiches DIY, une page Boutique sanctionnée en différentes catégorie pour vendre les fiches pour devenir autonome et une page Contact.

Enfin, ils voulaient permettre aux professionnels, qui vendent leurs fiches, de leur consacrer une partir Pro pour pouvoir télécharger différents documents. Nous avons donc mis en place un accès sécurisé grâce aux modules User Profiles Made Easy et Members pour l’identification des personnes, le module File Away pour le téléchargement de fichier. Les professionnels doivent s’inscrire grâce à un formulaire de contact et une personne des Éditions Ypypyp leur envoie un code d’accès pour entrer dans la partie Pro.

Google Responsive Mobile

21 avril 2015 / in / by Chris Letellier

Responsive Design – Optimisation des sites pour mobiles

Google différencie maintenant les sites adaptés ou non aux mobiles et tablettes, ce que l’on appelle le Responsive Design. Même si nous pouvons voir un site non responsive sur un mobile ou une tablette, la navigation est plus difficile et les internautes sont souvent obligés de zoomer pour voir le texte et les images.

Comme Google peut reconnaître sur quel appareil l’internaute se trouve, Google référencie les sites responsives plus avant qu’un site non responsive si l’internaute se trouve sur un appareil de type mobile ou tablette.

Les différents sites que j’ai mis en responsive sont des sites surtout en E-majine réalisés dans l’agence Schuller Graphic.

Réalisation :

A l’arrivée de Google Mobile le 21 Avril 2015, l’agence Schuller Graphic a envoyé une Newsletter à ses clients pour leur proposer de mettre leur site en responsive dont certains clients ont répondu à cette offre.

Tout d’abord, pour ne pas déranger le bon fonctionnement des sites web, j’ai dupliqué chaque site sur un autre serveur. Ensuite, j’ai choisi de prendre la technologie Foundation pour le responsive car j’avais déjà travaillé avec. Même pour le site Sanchez Industrie, qui est un Prestashop, j’ai préféré prendre Foundation que la grille Bootstrap de Prestashop.

J’ai donc téléchargé la grille Foundation en css et les jQuery associés pour divers fonctions que j’ai envoyées et intégré sur chaque site. Ensuite, j’ai construit mes colonnes sur chaque template de chaque site. En effet, la grille foundation est composée de 12 colonnes. Donc, nous avons de multiples choix pour découper une page suivant si nous avons une leftbar ou non, si nous voulons montrer les produits en 2, 3 ou 4 colonnes, si nous souhaitons couper le footer du site en 2 ou 3 colonnes.

Par conséquent, voici les sites web passés en Responsive Design et validés par Google.

Fioul Normandie

16 avril 2015 / in / by Chris Letellier

Fioul Normandie – Distributeur de Fioul E.Leclerc en Normandie

Fioul Normandie de la société Distrifioul basée à Coutances dans la Manche. Elle nous a contacté pour lui créer un site Web. Ce site permet aux Normands de commander le fioul par Internet et d’être livrés. Distrifioul est une société basée à Coutances est distributeur du groupe E.Leclerc. Comme, elle fait partie du groupe E.Leclerc, elle propose à ses clients une facilité de paiement avec la carte Financo.

Le site Fioul Normandie est un site e-commerce responsive en E-majine réalisé dans l’agence Schuller Graphic.

Réalisation :

Tout d’abord, nous sommes partis de la base Prix-Fioul. Par contre DistriFioul voulait des étapes différentes pour l’utilisateur.

En effet, au lieu d’entrer le code postal comme sur Oildist en lui proposant les codes postaux livrables. Notre Client préférait que l’internaute tape sa ville avec une saisie assistée.

Puis, dans la seconde étape, l’internaute peut choisir son fioul. Un tableau lui ai montré avec les différents prix suivant la quantité livrée et suivant la zone que l’internaute a sélectionnée. En effet, les prix sont différents suivant les zones livrées.

L’internaute choisit sa quantité et une estimation de prix lui ai fourni. Lorsqu’il a validé sa quantité, un calendrier de livraison lui ai proposé. Il doit choisir une date ultérieure à la date de commande et il ne peut pas commander le dimanche. Mais le client peut être livré dès le lendemain.

Ensuite, l’internaute arrive sur le processus normal d’un site e-commerce tel que le panier, l’authentification et le paiement. La commande passée, l’internaute reçoit un e-mail de confirmation et est contacté par une conseillère.

Nous avons aussi inséré le module Newsletter à E-majine et placé un widget sur la page d’accueil. Pour le back-office de ce site, nous avons inséré les différentes zones de livraison en Normandie et associé les codes postaux et les villes à ses zones.

Enfin, nous avons choisi avec le client, le nom de domaine http://leclerc-fioul-normandie.fr/ pour un meilleur référencement.

Gestion de projets

1 avril 2015 / in / by Chris Letellier

Gestion de Projets en ligne – Planning – Temps de travail

Dans l’agence Schuller Graphic, nous utilisons le planning commun en ligne Tom’s Planner pour les projets. Mais celui-ci, nous convenais pas pour noter les heures effectuées sur un projet. Au lieu de noter nos heures sur un dossier ou une feuille de calcul de type Excel, j’ai décidé de créer un back-office en ligne.

Le développement Gestion de Projets a été développé en PHP/MySQL à mes temps perdus pour le confort de l’équipe.

Réalisation :

J’ai donc repris le back-office de Netto Décor Qualité que j’ai installé dans un dossier d’un de nos serveurs dédiés. Ensuite, j’ai réfléchi sur la base de données pour la construire, voir quels champs que je devais mettre et dans quelle table.

J’ai commencé à créer la page d’accueil de cette gestion de projets avec un bouton Ajouter un projet et le tableau présentant les différents projets avec comme colonnes : Date de création, Nom du projet, Date de début, Avancement du projet en pourcentage, et une colonne Options qui contient les boutons Modifier, Visualiser, Ajout de Temps et Supprimer.

Le bouton Ajouter un Projet s’ouvre en fancybox car il y a très peu de champs à remplir : le nom du projet, les différents temps prévus (Graphisme, Gestion de projet, Développement, Intégration, Contenu). De plus, nous pouvons ajouter des notes grâce à un ou plusieurs champs Textarea.

La fenêtre Modification reprend tous les champs ci-dessous, mais aussi un tableau des heures travaillées par Intervenant et par Poste. De plus, nous y trouvons un graphique en barre par poste entre le temps travaillé et le temps prévu. Ce graphique fait en jquery peut être exporté en image (JPG, PNG), en PDF ou en SVG.

La fenêtre Visualisation est la même que la fenêtre Modification sauf qu’on ne peut rien modifier, juste imprimer.

Pour indiquer les heures travaillées, aussi bien sur la page d’accueil que sur la page de modification, la fenêtre s’ouvre en fancybox et suivant la personne, mets le poste associé grâce à l’authentification de l’ouverture et à la session en PHP. Le poste peut être changé et lorsqu’on valide les heures, la fancybox se ferme automatiquement et actualise la page parente.

Voici un exemple de projet :

RESPIMER NetiFlow

1 avril 2015 / in / by Chris Letellier

Développeur web Respimer Les Laboratoires de la mer

RESPIMER NetiFlow – Lavage nasal des laboratoire de la mer

RESPIMER NetiFlow est un produit du groupe Le Laboratoire de la Mer. Notre agence de Rennes faisant les plaquettes Respimer. Le Laboratoire de la Mer nous a contactés pour faire leur site web Respimer en Anglais. En effet, Respimer Netiflow avait déjà un site web en Français fait sous WordPress.

Le site RESPIMER NetiFlow est un site de présentation en WordPress réalisé dans l’agence Schuller Graphic.

Réalisation :

Le Laboratoire de la Mer nous a transféré leur site complet avec la base de données associée. J’ai tout d’abord changé le nom des tables WordPress. Celle-ci pour qu’elles ne rentrent pas en conflit avec les tables en français lors du transfert. J’ai effectué le remplacement en base de données du nom de domaine par un domaine de test.

Ensuite, j’ai transféré les fichiers et la base de données sur un de nos serveurs privés.

J’ai tout d’abord, changé les noms des pages et les urls pour les mettre en anglais. Ensuite, je me suis occupé du menu qui est différent du site en français.

Ensuite, page par page, j’ai changé les textes qui m’ont été fournis par Le Laboratoire de la Mer tout en respectant le style des pages. J’ai dû aussi refaire toutes les images des pages mais aussi l’image de fond du Header et les images de la page d’accueil.

Enfin, j’ai créé un switch que j’ai placé dans le Header du site pour pouvoir passer du site version française au site version anglaise et inversement.

Une fois le site terminé et validé par Le Laboratoire de la Mer, je leur ai créé un dossier contenant tout le site WordPress en anglais et un export de la base de données. Mais aussi, le code HTML et le jQuery du switch à inclure sur leur site Respimer Netiflow version française.

Les Foulées de Bayeux

1 avril 2015 / in / by Chris Letellier

Les Foulées de Bayeux – Epreuve de running à Bayeux en Normandie

Les Foulées de Bayeux est une association qui organise une journée par an une compétition de running à Bayeux en Normandie. Les organisateurs des Foulées de Bayeux nous a contacté pour avoir un site pour montrer cette journée, vendre les places directement en ligne et gérer les courses. Par avant, il avait juste un site vitrine et les coureurs devaient payer leur place par une autre passerelle.

Le site Les Foulées de Bayeux est un site e-commerce en WordPress réalisé dans l’agence Schuller Graphic.

Réalisation :

Tout d’abord, nous avons donc commencé à installer WordPress avec le module e-commerce WooCommerce. Puis, le graphiste a intégré entièrement le site, pendant que le chef de projet configurait le WooCommerce. Ensuite, nous avons fait un point pour s’organiser sur les courses et la passerelle. Cette passerelle entre l’administration de WordPress et l’administration que je devais faire pour gérer les courses. Nous avons donc décidé de mettre en commun les références de courses avec les catégories de personnes associées.

Un internaute choisit sa course et remplit tous les champs qu’on lui demande tel que Nom, Prénom, Date de Naissance, Certificat Médical… Ensuite, une fois qu’il a payé, un hook est mis en place et transfert toutes les données vers ma base de données.

Ensuite, les organisateurs des Foulées de Bayeux doivent s’identifier pour entrer dans la partie Administration pour gérer les courses. La page d’accueil présente les différents participants des courses modérés ou non. Ils peuvent donc aussi en ajouter manuellement.

Dans ce back-office, nous pouvons trouver les sections :

La liste des clubs FFA ou Non avec un moteur d’import.
Les catégories des participants.
Les différentes courses d’une année.
Une section import / export servant surtout au chronomètre Breteven, mais aussi pour un résultat automatique des récompenses.
La page Arrivée par course avec les différentes places et prime.
Une section Utilisateur pour créer, modifier ou supprimer une personne pouvant accéder à ce back-office.

Enfin, voici un diaporama de ce back-office :

Prev 1…2 345 6…8 Next