Refonte d’un site Internet

Nos bureaux vous ouvrent les portes sur la refonte (ou du moins la reconstruction) d’un site Internet.

Vous allez donc pouvoir visualiser les étapes de la construction d’un site responsive design avec sa console d’administration.

L’existant

On part d’un site touffu et brouillon, tout y est mais rien n’est mis en avant et organisé. Le client se plaint d’une mise à jour complexe et hésitante. De plus le site n’est pas responsive et n’est donc pas compatible avec les tablettes et GSM, grosse perte de référencement dans les moteurs de recherche.

Vu à partir d'une tablette

Vu à partir d’une tablette

Page d'accueil

Page d’accueil actuelle

 

Première étape, état des lieux du référencement

  • préparateur harley 13 : non présent dans les 5 premières pages
  • préparateur harley bouches du rhone : première page (ouf)
  • vente harley occasion bouches du rhone : non présent dans les 5 premières pages (en reprenant bouches du rhone qui avait été pris pour préparateur)

On constate un gros défaut de référencement, on va donc pouvoir tout reprendre sans se soucier de ce point avec du rewriting ou des pages satellites pour ne pas perdre le référencement.

Explication : si on regarde le code source de la page d’accueil, il y a plus de mots dans les mots clés que dans la page elle-même 🙂 Les métas sont bien présents et fournis mais on compte tout au plus 100 mots dans la page ! On ne répétera jamais assez que c’est l’itération qui fait le référencement et non la présence de mots clés : mot clé + titre + mot dans les articles (au moins 3 fois).

Seconde étape, récupération de l’existant

On fait un tour du site, principalement pour les photos, elles sont toutes d’un format ridicule et pixelisées, on prendra donc le soin de ne rien récupérer. Si cela avait été pour présenter des boulons on ne se serait pas posé de question, mais là on vend du rêve et du détail, la qualité d’image est donc primordiale !

 

Cahier des charges

Dans un premier temps on fait le point avec le client de l’existant, bien noter ce qu’il aime, ce qu’il déteste et ce qui pourrait être amélioré.

Pour cette approche j’utilise une vieille méthode marketing :

  • ce que le client rêve
  • ce qu’il désire
  • ce qu’on va faire ! prend en compte les moyens et l’aspect technique.

Là dessus penser à l’évolutivité (ce qu’on pourra rajouter ou modifier par la suite) et les traductions (prévoir dès le début les langues dans la programmation).

L’aspect fonctionnel

A partir de là je définis un cahier des charges de quelques pages expliquant les sections et son  contenu (champs que l’on placera en base de données), exemple si je définis une moto d’occasion cela donne :

  • une photo principale et X photos
  • Une marque
  • Un millésime
  • Une cylindrée
  • Un état
  • Un kilométrage
  • Un tarif
  • Une fiche descriptive
  • Un statut
  • Une date de mise en ligne

Ce travail est primordial car c’est lui qui va vous permettre de monter les bases de données (ne rien oublier permet de gagner un temps précieux en programmation) et donner au designer la matière à travailler.

L’aspect graphique

Donc désormais on a les tables et les sections on démarre sur une première maquette qui permettra au client de valider visuellement l’articulation du site (et éventuellement son design si on est bon du premier coup).

première maquette

Ici c’est pas la beauté qui prime, ce sont les phrases clés, l’intégration du logo, les typos et les couleurs que le client doit appréhender et valider. On aura tout le temps de faire du dessin quand le design est validé :p

Premier retour client

On présente la structure et le design, les idées s’éclaircissent pour le client et les idées concrètes arrivent …

On connait désormais :

  • les couleurs à employer : noir, beige ou rouge vieilli
  • les typos
  • le logo qui sera retravaillé
  • des touches persos avec des plaques américaines, de la rouille, des tâches de peinture, …

Le plus dur est fait, on a le concept, à nous de jouer … On est donc le 11 juillet 2018, la maquette part chez le designer et le cahier des charges aux développeurs.

Mise à feu

On développera comme à notre habitude le site en C# sous Visual Studio, l’énorme avantage est que la couche web est dissociée de la programmation, le designer peut donc mettre ses gros doigts dans la MasterPage sans rien casser au site 🙂

D’un point de vue technique on partira sur une base de données MS Access, pour deux raisons, par budget et par usage (on aura jamais 100 connectés simultanés sur une occasion car le site reste local).

NDLR : la grosse question actuelle et récurrente, pourquoi on fait pas le site sous un open source connu comme WordPress ?

A ceci je répondrai par trois points :

  • la sécurité : c’est fait maison, pas de faille possible. On voit trop souvent des open source modifiés par des hackers et je ne veux pas passer mes journées à faire des mises à jour pour les centaines de développements réalisés.
  • l’évolutivité : le fait de développer maison on n’a pas de limite ou presque, on peut modifier et ajouter ce que bon semble au client.
  • la propriété : le site appartient au client, à validation il existe un transfert de propriété, donc les codes du site et son contenu deviennent la propriété exclusive du client. Avec un open source, vous ne pouvez pas transférer un bien qui ne vous appartient pas !

Bon trêve de discussion, on se met au travail et on vous présente les consoles d’administration d’ici quelques jours …

 

J + 5 : les bases de données et la console d’administration

Personnellement, je préfère débuter par l’administration, je commence par réaliser les bases de données, bien réfléchir aux relations et simplifier au maximum les structures.

Par exemple, les tables Réalisations, Peintures et Usinages sont identiques, je vais donc créer une seule table en ajoutant un id de Catégorie qui me permettra de connaitre dans quelle Catégorie travailler.
Le gros Avantage : si le client désire une nouvelle catégorie, on a joute un id de Catégorie et le tour est joué.

Les outils

On définit les composants dont on aura besoin et on les importe dans notre dossier de librairies.

  • Pour la gestion des fiches on emploiera Tiny MCE, pratique, simple d’usage il permet au client d’ajouter du formatage au texte (gras, italique, titres, …).
  • Pour l’upload des images, on partira sur  un composant maison en Jquery et Json avec la bibliothèque modernizr qui permet d’utiliser le glisser déplacer.
  • Pour le design et l’iconographie on utilisera Font Awesome.

L’ergonomie

Une console d’administration se veut simple et ergonomique et normalisée au HTML5 (responsive design), on commence par segmenter chaque région du site dans des menus intuitifs.

Console d'administration

Console d’administration

Puis on essaye de simplifier au maximum les actions et bien les dissocier avec des icônes expressifs :

  • d’abord je crée un titre et une fiche
  • ensuite je mets une image de garde
  • puis j’envoie toutes les photos inhérentes à la fiche
  • et enfin on valide pour rendre la fiche visible sur Internet
Page des actions

Page des actions

A ce stade, en seulement quelques jours de travail on a déjà réalisé 60% de l’ossature du site. On teste bien cette première partie que les actions, modifications et suppressions fonctionnent bien. On vérifie que les messages d’alerte soient fonctionnels et compréhensibles (format des images non valide, on attend un nombre et non un texte, …).

Maintenant en parallèle de l’administration, on va pouvoir écrire nos premières fonctions pour la partie visible du site : listing des fiches, diaporama des photos, … même si rien n’est encore fait d’un point de vue graphique, peu importe, les fonctions une fois développées pourront être appelées dans tout type de design, il faudra juste peaufiner l’affichage et le design dans la phase finale avec les designers.

 

Arrêtons-nous sur la table Occasions

 

Comme une boutique, la table Articles (ici Occasions) est primordiale pour plusieurs choses :

  • d’une ce sera la table la plus consultée et donc la plus sollicitée
  • de deux il faut bien la segmenter (tables jointes) car c’est nettement plus rapide de chercher sur un ID que sur du texte
  • tertio l’optimiser au max (bien réfléchir sur les limites des champs et leurs caractéristiques), plus une table est optimisée en taille et plus elle sera rapide en traitement

NDLR : On voit trop souvent des sites afficher par exemple « liste des articles les plus consultés » avec des requêtes du style select count(*) et des jointures à tout va qui mettent plusieurs secondes à s’afficher et ensuite on incrimine les serveurs pour les lenteurs de traitement. Il faut savoir que si vous avez une table de 10 articles + une table jointe de 3 lignes, avec un select (*) on obtient en mémoire : 10 x 3 = 30 lignes * X champs des deux tables, ce qui va vite saturer la mémoire et le processeur lorsque notre table Articles comportera 1000 produits.

Définition des champs

Si on reprend notre exemple sur les Occasions, on va commencer par définir les types de champs et les tables liées :

  • Une marque > table liée idMarque
  • Un millésime : année, donc un entier court
  • Une cylindrée : 1700 cm³, donc un entier court
  • Un état > table liée idEtat
  • Un kilométrage : 14 000 kms, donc un entier court
  • Un tarif : 10 000 €, donc un décimal pour le tarif
  • Une fiche descriptive : un champ mémo, pas le choix (pour les gros sites ne pas hésiter à sortir ce champ dans une autre table)
  • Un statut > table idStatut
  • Une date de mise en ligne : 14/07/2018, donc un champ date court

Ce travail effectué on peut créer nos tables. Je commence par les tables annexes et je finis par la table principale.

NDLR : si on doit par exemple faire des mises en avant de produit en page d’accueil, ajouter un champ booléen Oui/Non, pas prévu mais je vais quand même l’intégrer au cas ou.

Affichage côté Internet

Petite astuce que j’emploie souvent, je génère un fichier XML des produits que je dois mettre en avant ou page d’accueil. Gros avantage, vous ne sollicitez pas la base de données et le traitement se chiffre en millième de secondes (parser XML en Jquery).

 

Conception du site Internet

Les bases de données sont en ligne, l’administration achevée (remplissage et édition des fiches), on peut enfin attaquer la mise en page finale du site et la programmation.

Première chose on définit les wrappers (ou conteneurs) en fonction des largeurs de site que l’on désire.

Ensuite, pour être certain de la conformité pour les tablettes et GSM, je commence par déclarer mes divs qui seront « modifiables » (translation hauteur et largeur) en flex :

et regrouper nos déclarations pour les écrans de petite taille :

De ce fait, les colonnes en flex nous permettent de superposer les articles et de ne plus les afficher les uns à côté des autres. Sur ce, 80% du travail est déjà réalisé, il n’y a plus qu’à définir le css du site (images, titres, texte, …).

Exemple d’utilisation du flex pour afficher quatre textes avec 4 logos dans 4 colonnes distinctes :

NDLR : vous avez bien compris que le rendu flex d’un site vous fait gagner beaucoup de temps pour être full compatible GSM. Il faut juste bien déterminer ce que l’on rentre dans le flex ou pas. Avec le F12 de google vous pouvez contrôler et vérifier les affichages selon les navigateurs et appareils, hyper pratique pour le debug du css. Généralement je développe en 600px de large et ensuite je peaufine pour le site sur écran d’ordinateur, toujours plus dur de bien caler les textes et images sur petit format, et c’est pas lorsqu’il y a des milliers de lignes en css que l’on peut aisément corriger le tir.

 

Le graphisme et le C sharp

Le css étant prêt, on va pouvoir commencer à monter la page de design (master page en C#). L’avantage de cette page permet de dissocier le graphisme de base au reste du site. Une master page se compose d’un header, d’une partie propre à elle et d’un conteneur (injection des pages de développement dans le graphisme).

Généralement ça se compose de la sorte :

On va donc intégrer dans cette master page tout le graphisme qui ne changera pas, donc à 99% on y trouvera que du HTML et sera aisément éditable par un webmaster sans connaissance aucune de la programmation. De plus si on doit faire un changement visuel du site, avec une simple page on peut tout modifier graphiquement en quelques minutes.

J+20, tout est prêt on a plus qu’à créer toutes les pages, le plus fastidieux à mes yeux.

Le côté organisé et fainéant du programmeur

Pour gagner du temps, je repère tout ce qui se réitère dans les pages su site et qui ne rentre pas dans la MasterPage. Je vois donc qu’une tétière avec un titre se représente ainsi que les titres aussi je vais me créer une classe graphique qui m’évitera de tout refaire à chaque fois pour chaque page.

NB : la fonction têtière permet de récupérer toutes les images d’un dossier et d’en prendre une au hasard, sympa graphiquement de ne pas toujours avoir la même photo.

Maintenant dans ma page, pour l’appel graphique d’une fonction, je n’ai plus qu’à faire :

 

 

 

 

Please follow and like us:
error0

Fin d’intégration des VM dans le cloud 2.0

Bonsoir,

A compter de cette nuit, nous avons attaqué la migration des dernières VM dans notre nouveau cloud 2.0. Une migration se fait à chaud et prend de 10 minutes à 1h30 suivant l’espace occupé.

Ce que vous y gagnez :

  • nouveau système de backup avec un plan de continuité dans notre second data
  • des règles de sécurité accrues avec l’ips activé en amont de vos machines
  • des reboots ultra rapides (disques SSD)
  • des capacités extensibles (mémoire, cpu, …)
Please follow and like us:
error0

RD medias le retour de le vengeance …

Que des grandes nouvelles pour ce mois de Juillet avec pas moins de 100% de disponibilité réseau depuis 5 mois.

Cerise sur le gâteau, nous sommes passés à 2 To de mémoire pour notre cloud 2.0, et pour fêter ça nous allons lancer nos nouvelles offres vers septembre-octobre ! Des offres qui reprendront en partie le système de nos concurrents (avec le service en plus) :

  1. offre RD, rien ne change, tout est compris et on accompagne toujours 24h/24 quels que soient vos besoins
  2. offre free, vous ne payez que le matériel et pas les services (sauf qu’en réalité tout y est), mais chaque demande sera facturable …

Enfin, dernière dépêche, 2016 serveur est déjà en labo et un cloud (dédié et client) verra le jour d’ici quelques semaines avec ses dernières technologies embarquées.

Ha j’oubliais, dernière info et non des moindres, notre nouveau logiciel de comptabilité qui sortira le 1er octobre (date ou RD médias passera en SAS) permettra de facturer vos consommations « on demand » …

 

Hébergement vôtre.

Please follow and like us:
error0

Communiqué de mars 2016

Un rapprochement Stratégique

Pour ceux qui auraient loupé l’information, Jaguar Network, hébergeur européen, est entré depuis quelques mois dans le capital de RD médias.
Cela nous permet d’offrir une nouvelle gamme de services dans le monde stratégique du réseau et d’accroître certains savoir faire au niveau des Cloud à technologies hybrides (high performance computing).

Une infrastructure upgradée

Par voie de conséquence directe, nous avons fini de conduire les opérations de mise à jour de nos capacités réseau de 2×1 Gbps vers 8×10 Gbps. L’ensemble des segments de nos datacenters sont concernés (front/back/management/backup).
Cela nous permettra entre autres d’ici quelques jours de vous proposer des solutions de backup de nouvelles générations pour serveurs physiques et virtuelles, infrastructures dédiées et cloud hybrides.

Un stockage évolutif

Dans cette nouvelle ère des objets connectés (IOT) et la venue de Windows 2016, notre nouveau Cloud est à présent disponible en cloud privé, publique et sous format
« database as a service » pour les moteurs MySQL, PostgreSQL, et SQL Serveur.
Nous pouvons maintenant stocker au format objet ou fichier depuis des baies de disques dédiées à haute performance SSD.

Avec le lancement exclusif de Windows 2016 à l’été un nouveau système de fichiers sera disponible afin de construire des miroirs transparents entre plusieurs serveurs dans différents datacenters.

Une nouvelle étape dans la sécurité

Avec le lancement de notre Cloud 3.0, nous avons mis à niveau nos équipements de sécurité Fortinet et analysons les attaques continuelles à l’attention des serveurs Linux et Microsoft sur notre réseau. L’IPS/IDS permettent de renforcer les contrôles de flux vers vos sites et mieux endiguer par exemple les injections form ou les attaques de type brute force. Ce ne sont pas moins de 800 signatures qui sont contrôlées en temps réel.
Bien entendu, ça ne vous dédouane pas des mises à jour permanentes de vos open source, surtout avec la venue des Ransomwares qui s’attaquent aux sites web désormais.

Un projet WAF (Web Application Firewalls) générique est actuellement à l’étude, n’hésitez pas à nous contacter pour tous les sujets de sécurité qui sont désormais des menaces que nous traitons au quotidien.

Please follow and like us:
error0

Ransomware arrive dans les sites web !

Pensez à mettre vos cms à jour car Linux est visé, et sous 2012 serveur pensez à donner les droits en modification aux minimums de dossiers (surtout pas sur le dossier racine) ! Sous 2003 serveur il reste à brûler des cierges et vérifier que les backups sont valides … Pour les retardataires encore sous iis6, n’hésitez pas à contacter nos équipes techniques pour planifier des migrations sous 2012 serveur.

http://www.lemondeinformatique.fr/actualites/lire-ransomware-ctb-locker-s-en-prend-aux-sites-web-64073.html

Please follow and like us:
error0

L’essentiel du management parle de nous

Un seul lien :  http://lesessentiels-capital.fr/presentation/article_technologie_rdmedias.html

Résumé de l’article :

RD Médias est composée d’un trio de professionnels qui s’emploie à proposer les meilleurs services d’hébergement Internet, dédié et mutualisé. Coup de projecteur sur une entreprise marseillaise qui conjugue humanité et haute technologie.

« Notre mission est stratégique et sensible. Nous construisons pour des entreprises des solutions sécurisées pour l’hébergement de leurs données, de leurs outils collaboratifs de travail à distance, de leur messagerie, de leur site web, ou de leurs applications. Notre relation repose sur la confiance. » Chez RD Médias, ces valeurs se traduisent par des actions concrètes que les clients apprécient au quotidien. Depuis sa fondation en 2001 à Marseille, l’hébergeur de solutions ASP Haute Disponibilité creuse un sillon prospère. A l’époque, ils sont deux à se lancer dans l’aventure : Laurent Zminka et Philippe Roussel-Casanova. Pour ce dernier, RD Médias conserve « un état d’esprit originel de mercenaires. Peu importe le montant de l’hébergement. Le principal est d’être intimement convaincus de la qualité et de la pertinence de nos solutions. Notre engagement aux côtés de nos clients est total. » Une perception confirmée par Cédric Avena qui complète le duo depuis 2007 : « Nous prenons les problématiques de nos clients à bras-le-corps. Dans un marché tendu, nous veillons à faire preuve d’excellence. » Aujourd’hui, RD Médias compte 1500 clients répartis sur tous les continents.

Une relation sincère et atypique

La démarche de RD Médias séduit les décideurs car les trois associés sont à la fois experts techniques et dirigeants d’entreprise. Pour Laurent Zminka, « Nos clients nous font confiance, car nous avons le même niveau de responsabilité tout en restant une entreprise à taille humaine ! » Chez RD Médias il n’y a pas de durée d’engagement. Seule la satisfaction du client fait foi. L’équipe, spécialiste toutes plateformes, déploie toute son énergie à bâtir votre solution d’hébergement, avec des serveurs configurés, testés et sécurisés, la mise en place d’une console d’infogérance et d’une aide au déploiement de vos solutions, quelque soit le langage employé. L’assistance téléphonique interne est gratuite et personnalisée. Avec RD Médias, vous n’avez à vous soucier de rien. Qui dit mieux ?

Please follow and like us:
error0