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 :

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 :

Appli Transport Chatel

1 avril 2015 / in / by Chris Letellier

Application Transport Chatel à Vire (14)

Le transporteur Chatel de Vire en Normandie nous a contactés pour effectuer une application destinée aux commerciaux de cette société. Cette application est développée pour un format iPad. La société de Transport Chatel nous a donc fourni son savoir-faire en tant que transporteur.

Cet application est un développement spécifique réalisé dans l’agence Schuller Graphic.

Réalisation :

Nous avons décidé de créer 7 templates différentes pour cette application car cette application est administrable sur le web. Une fois les templates réalisés en HTML, j’ai fait une animation jQuery pour chaque template.

Nous pouvons naviguer sur cette application sur 3 niveaux, j’ai donc ajouté des flèches de navigation en bas à droite de l’écran pour se repérer si oui ou non, nous pouvons aller au deuxième niveau (vers le bas) ou au troisième niveau (vers la droite).

Enfin, j’ai intégré un menu en haut à gauche de cette application Chatel qui reprend le titre de chaque slide, le menu est constitué des slides de premier et de second niveau.

Nous avons créé un back-office en ligne pour créer, modifier ou supprimer un slide. Nous pouvons aussi modifier la position des slides grâce à un drag & drop. Lorsque les modifications ont été faites, nous pouvons générer l’application grâce à un bouton. Ce bouton créé un fichier HTML, inclut le CSS, le jQuery et les images, mais aussi un fichier texte avec le numéro de version de l’application. Tout cela est inclut dans un ZIP.

Notre chef de Projet a pris la licence développeur Apple pour permettre de mettre cette application sur iPad. Grâce à Titanium, il a compilé cette application. L’application Chatel, lorsqu’elle est lancée et qu’une connexion web existe, vérifie en ligne le numéro de version. Si celui-ci est différent que celui en local, il télécharge le dossier et l’installe, sinon l’application démarre.

Vous pouvez voir une démo de cette application en cliquant sur le lien ci-dessous.

Jeu SMACL

9 octobre 2014 / in / by Chris Letellier

SMACL Assurances – Partenaire de Gilles Lamiré

SMACL Assurances est une société d’assurances basée à Niort. Pour la 10ème édition de la Route du Rhum de Saint-Malo à la Guadeloupe, elle est partenaire du navigateur Gilles Lamiré. Ce navigateur avec son trimaran Rennes Métropole Saint-Malo Agglomération, dont le nom était Prince de Bretagne.

SMACL nous a contactés pour créer un jeu sous forme de quizz pour son personnel. Ce jeu commençait 1 mois avant le départ de la course du Rhum et ce jeu se terminant le jour du départ. Les gagnants du jeu SMACL pouvaient gagner une sortie en mer avec Gilles Lamiré sur le trimaran Rennes Métropole Saint-Malo agglomération.

Ce jeu est un développement spécifique réalisé dans l’agence Schuller Graphic.

Réalisation :

Tout d’abord, le jeu de SMACL est hébergé sur notre propre serveur et relié à une base de données MySQL.

Puis, avant la date du commencement du jeu, les employés de la SMACL pouvaient voir un écran de présentation. Cet écran leur expliquait le déroulement et le règlement du jeu.

Ensuite, un mois avant le départ de la Route du Rhum, les personnes pouvaient s’inscrire grâce au formulaire. Tous les champs étaient obligatoires la première fois. Une vérification sur l’adresse e-mail était faite si la personne faisait partie ou non de la société SMACL Assurances, puis elle devait confirmer son inscription grâce à un lien avec une clé.

Par la suite, les joueurs peuvent répondre à 3 questions chaque semaine pendant 1 mois. Même si le joueur ne répond pas une semaine, il peut répondre au questionnaire suivant qui est programmé du lundi matin 00h01 au dimanche soir 23h59. Donc, si le joueur répond aux 3 bonnes questions, il est donc inscrit au tirage au sort. Par conséquent, plus que les personnes gagnent, plus ils auront de la chance de gagner un lot à la fin du jeu au tirage au sort.

Enfin, tous les lundis, un cron envoie un message aux joueur leur informant si ils ont gagnés ou perdus la semaine précédente. A la fin du jeu, un écran de remerciement s’installe et le tirage au sort est effectué par huissier.

Voici une galerie du jeu :

A-Protect

19 juillet 2014 / in / by Chris Letellier

A-Protect – Vente d’équipement de protection individuelle et de vêtements professionnels.

A-Protect est une entreprise spécialisée en vente d’équipement de protection individuelle et de vêtements professionnels. Cette entreprise est basée à Colombelles près de Caen. A-Protect nous a sollicités pour créer un site e-commerce pour la vente de leur produits. Des produits tels que vêtements de protection, vêtements spécifiques par métier ou par marque, divers gants et chaussures…

le site A-Protect est un site e-commerce en E-majine par Médialibs réalisé dans l’agence Schuller Graphic.

Réalisation :

Le site A-Protect est un site e-commerce avec mise en place de plusieurs moyen de paiement, ajout de module tels que mise en avant de produits, un module Newsletter.

Tout d’abord, le header est composé :

Logo et Slogan
Partie E-commerce : recherche, Mon Compte, panier
Numéro de téléphone
Menu

Ce menu est composé de différentes catégories avec des sous-catégories. lorsqu’on est sur une catégorie, les sous-catégories apparaissent mais aussi les produits.

De plus sur la page d’accueil, nous avons inséré dans ce pack e-commerce un big slider. Ce slider est relié à une administration (développement spécifique en PHP/MySQL) qui permet d’ajouter, modifier ou supprimer des slides. Le webmaster du site A-Protect peut donc changer l’ordre des slides, lui mettre un titre, un lien et une couleur de fond. nous remontons aussi différentes marques, les produits à la une. Puis, nous avons mis une description ds Valeurs pour le référencement.

Puis pour le footer, nous avons les conditions d’un site e-commerce (Moyen de paiement, livraison, Transport…). Mais aussi, une liste de liens qui vont vers des pages et non la boutique.

Après quelques temps, la société A-Protect nous a demandé de le mettre en responsive. J’ai donc pris Foundation pour le rendre responsive.

Enfin, certains produits sont personnalisable. En effet, nous pouvons broder du texte sur ses produits. Le client a le choix entre Cœur ou Dos, 13 couleurs et 6 polices d’écritures. Lorsque le client choisi la position, cela le limite en caractère et fait augmenter le prix.

Oildist

19 juillet 2014 / in / by Chris Letellier

Oildist – Vente de Fioul, gasoil, GNR et de bois sur les départements 61, 53, 14, 35.

Oildist est une entreprise de vente de Fioul (FOD ou Qualy-Plus) et de gazole non routier. Oildist vend aussi du bois en granulés ou sur palette. Elle est située à Briouze dans l’Orne en Basse Normandie et livre les départements de l’Orne (61), la Mayenne (53) et l’Ille et Vilaine.

Oildist est un site de e-commerce en E-majine réalisé dans l’agence Schuller Graphic.

Réalisation :

Tout d’abord, nous avons effectué la refonte du site Oildist. Auparavant c’était un site de présentation de la vente de bois et de fioul en Izi-média. Ce site présente donc le bois et le fioul. Mais nous pouvons aussi acheté directement du bois en magasin ou en livraison et du fioul en livraison. En backoffice, nous avons développé une partie servant aux codes postaux de livraison pour le bois et le fioul dans le Calvados, l’Orne, en Mayenne et l’Ille et Vilaine.

Ensuite, nous avons donc mis en place des fiches produits pour le bois et développé suivant si l’internaute prend en magasin ou se fait livrer chez lui. Pour le fioul, nous avons repris le processus de Prix Fioul.

L’internaute choisit son département et entre son code postal de livraison. En cas d’erreur on lui affiche les codes postaux livrables. Puis, il choisit 1 fioul entre les 3 proposés : fioul ordinaire, QPlus, Gazole non routier, et entre la quantité désirée. Avant la validation, nous calculons le prix total et nous envoyons toutes ses caractéristiques sous forme de variantes au panier. L’internaute n’a plus besoin que de payer par les différents moyens de paiements : Chèque, Carte Bancaire en ligne ou en livraison, Virement ou en 3 fois sans frais avec la carte Réglo.

Quelques temps après, Oildist nous a sollicités pour mettre son site en responsive. J’ai donc pris Foundation pour la mise en place.

Fer de charme

19 juillet 2014 / in / by Chris Letellier

Fer de charme – Table barbecue et salons extérieurs

Fer de Charme nous présente ses différentes tables. Tables barbecues, ses tables en fer forgé sont accompagnées de chaises en fer forgé. Nous pouvons aussi trouver sa tonnelle en fer forgé. Les tables barbecues peuvent être rondes, ovales ou rectangulaires. De plus, Fer de Charme nous présente ses différents salons extérieurs. Ceux-ci composées de salons extérieurs, salle à manger extérieur, bain de soleil…

Fer de Charme est un site de présentation en Izi-média réalisé dans l’agence Schuller Graphic.

Réalisation :

Tout d’abord, nous sommes partis de la plaquette que nos collègues avaient faite. J’ai intégré la plaquette au site web. En effet, le site devait sortir le plus rapidement possible pour un salon.

Dans le Header, j’avais mis le logo, le slogan et le menu. Celui-ci est composé d’Accueil, des produits tables barbecues, une page présentant la société et la page Contact.

Puis, sur la page d’Accueil, j’ai inséré le slider et mis en avant 3 produits :

une table barbecue,
les chaises
une tonnelle qui dirigeaient l’internaute vers les pages produits.

Ensuite, l’infographiste a proposé sa maquette, qu’il a intégrée. Puis il a modifié les 3 widgets de remonter de produits qui montraient l’image du produit et au roll-over une animation montrait le texte associé.

Fer de charme, en plus de faire les tables barbecues, vend des salons extérieurs dont j’ai fait les pages produits comme sur le modèle des tables barbecues.

Enfin, il voulait que le site soit disponible en français, mais aussi en anglais. Or, nous étions sur du Izi-média et cette option n’est pas disponible. Nous avons donc dupliqué toutes les pages avec un indicatif devant pour les pages anglaises et en jQuery, nous faisons la différence du menu (français ou anglais) si l’URL contient cet indicatif. Pour passer de la version française à l’anglaise, ou inversement, nous avons ajouté le drapeau (français ou anglais) en haut à droite du Header qui mène sur la page d’accueil respective.

Fer de Charme est un site simple en navigation et épuré qui fait bien ressortir les produits : les tables barbecues et les salons extérieurs.

Maisons anciennes

19 juillet 2014 / in / by Chris Letellier

Maisons anciennes, Site d’annonces immobilières à Bayeux dans le Bessin

Maisons anciennes à Bayeux dans le Bessin est la seule agence immobilière du Bessin. Elle est spécialisée dans la transaction de biens anciens : appartements, maisons, corps de ferme, maison de caractère… Il nous présente tous leurs biens, les nouveautés. Mais aussi, les coups de cœur et leur exclusivité de biens immobiliers dans le besson.

Maisons anciennes est un site d’annonces immobilières en E-majine réalisé dans l’agence Schuller Graphic.

Réalisation :

L’agence immobilière Maisons anciennes ne rentre pas leur annonce manuellement. En effet, c’est un export de leur logiciel FNAIM qui importe dans le backoffice d’E-majine avec des champs préconfigurés.

Tout d’abord, le site Maisons anciennes est présent depuis des années. Puis, j’ai dû refaire le moteur de recherche avancée pour avoir plus de critères tels que : Type de bien, Nombre de pièces, Surface habitable, Nombre de chambre, Superficie du terrain, Secteur géographique et le budget. Les utilisateurs rentrent les données qui souhaitent pour trouver leur bien immobilier.

Mais en plus, Nous avons mis et cachés certains champs dans ce même moteur de recherche. En effet, en relation avec du jQuery, lorsque l’on clique sur les liens Coups de cœur, Nouveautés, Exclusivités, Baisses de prix et Notre sélection de projet touristique, cela amène sur la page de recherche avec un champs bien spécifique qui est renseigné.

J’ai dû restyler dans le résultat de recherche les fiches annonces, mais aussi créer un filtre pour pouvoir trier les résultats par prix, nombre de pièces, surface habitable, nombre de chambres, superficie du terrain, aussi bien en ascendant que en descendant. J’ai relié ce filtre au moteur de recherche en jQuery. Ensuite dans la fiche du bien, j’ai dû aussi faire quelques modifications de style et des changements de position des différents paragraphes.

Maisons anciennes, spécialiste des biens immobiliers sur Bayeux dans le Bessin, répartit les biens en 5 secteurs géographiques : Bayeux, Bayeux Nord-Ouest, Bayeux Sud-Ouest, Bayeux Sud Est et Bayeux Nord Est.

Kaizen Magazine

19 juillet 2014 / in / by Chris Letellier

Kaizen – Vente de magazine publication d’articles de presse

la société Kaizen, un magazine alternatif, 100% positif, pour changer le monde pas à pas. Kaizen est un mot japonais. Littéralement, il signifie changement [kai] et bon [zen]. C’est aussi la philosophie, d’un changement durable par l’action de petits pas. Kaizen est né de la rencontre de Cyril Dion, de Pascal Greboval et d’Yvan Saint-Jours, fondateur du magazine La Maison Écologique. Cyril Dion est co-fondateur du Mouvement Colibris. Pascal Greboval est journaliste et photographe indépendant. Yvan Saint-Jours est fondateur du magazine La Maison Écologique. Il est notamment porté par le Mouvement Colibris et inspiré par la philosophie de Pierre Rabhi.

Kaizen est un site e-commerce en WordPress, associée à WooCommerce réalisé dans l’agence chez Schuller Graphic.

Réalisation :

Tout d’abord, nous sommes partis d’une base WordPress avec le thème Ciola qui était compatible avec WooCommerce.

Puis, nous avons décidé de mettre dans le header directement un bouton pour la vente d’abonnement. Mais aussi un bouton pour connaître le magasin le plus proche de chez nous pour trouver le magazine Kaizen Magazine. Puis, nous remontons en jQuery les réseaux sociaux tels que le flux RSS, Twitter et Facebook.

Ensuite, dans le menu, nous avons dissocié la rubrique Kaizen, les différents articles classées par thématique, et la vente de magazine et d’abonnement. Nous avons donc créé un sous menu qui contient les thématiques qui se mettent en orange lorsqu’on est sur la thématique choisie.

Dans le footer, nous faisons une remontée d’informations qui reprend principalement le menu.

Nous avons décidé de mettre une rightbar qui contient l’abonement à leur Newsletter, l’agenda des manifestations, une remontée d’article tel que le dessin de la semaine, et une section publicité pour leur partenaire. Kaizen décide si il le veule afficher ou non cette rightbar dans leurs pages.

Pour la page d’accueil, nous avons dû modifier les modules tels que le nombre d’affichage du 1er module qui passe de 4 à 3 avec des remontés d’articles bien spécifique. Pour les autres modules, c’est le nombre d’affichage d’articles que nous devions modifier.

Enfin, pour la partie WooCommerce, nous avons mis en place certain champs lorsque l’internaute désire que les abonnements ou les magazines soient livrés à des adresses différentes. De plus, il y a un export des commandes en csv toutes les nuits envoyé par e-mail pour un traitement avec le service envoi de la société avec laquelle Kaizen magazine travaille.

Prev 1 234 5…5 Next