Comment bien développer son site web ? Les bonnes pratiques du développement web

Thèmes abordés

Développer son site web, pratiques du développement web, From Scratch, Framework, CMS, outils de détection, outils d'optimisation, JavaScript, CSS, HTML, Ajax, base MySQL, développement front-end, PHP, gamification, ergonomie, duplicate content, mémoire professionnel, mémoire informatique

Résumé du document

Le mémoire "Comment bien développer son site web ? Les bonnes pratiques du développement web" a pour but de présenter au lecteur les différents moyens de construire pour un faible coût un site web sécurisé, qui consomme peu et qui attirera plus de visiteurs, notamment grâce à son accessibilité. Pour cela il présente les principales technologies web et donne un exemple de cahier des charges pour un projet web. Il compare les avantages et inconvénients des sites From Scratch, des Frameworks et des CMS, tout en passant par une analyse historique ; par exemple, un site From Scratch est plus pratique pour un site statique alors qu'un CMS sera à l'inverse utilisé pour un site qui a besoin d'être mis à jour régulièrement.

Le Framework permet, quant à lui, de ne pas dépendre d'un CMS, mais de développer les bases de manière plus facile, avec l'utilisation de composants réutilisables d'un projet à l'autre par exemple. Ce mémoire fournit également une liste non exhaustive d'outils (outils de détection, outils d'optimisation…) et de bonnes pratiques permettant d'optimiser son site web selon les trois critères précités : sécurité, frugalité énergétique, accessibilité. Il montre enfin que les éco pratiques correspondent la plupart du temps à de bonnes pratiques générales et que l'un des critères les plus importants pour avoir un site web optimisé est la simplicité.

Extraits

[...] - On peut également éviter d'utiliser les plug-ins des réseaux sociaux fournis par défaut, car ces derniers utilisent de nombreuses requêtes et téléchargent beaucoup de fichiers, d'autant plus qu'il existe des générateurs alternatifs fonctionnels. On peut aussi minifier les fichiers fournis par les réseaux sociaux. Exemple : https://www.websiteplanet.com/fr/webtools/sharelink/ - On pourra stocker les images dans des Sprites Sheets (combinaison de plusieurs images dans un fichier image unique) pour éviter les allers-retours de téléchargements, on peut par exemple mettre le favicon dans le cache, car ce dernier est très souvent utilisé. On peut donc utiliser une seule image et définir des positions pour chaque classe CSS. [...]

[...] - Quels sont les besoins de cette cible ? Le cahier des charges d'un site web comprend généralement : - La présentation d'ensemble du projet - Une description de la charte graphique - Une description fonctionnelle et technique - Les prestations attendues et modalités de sélection des prestataires (Développement, design, intégration, migration de bases de données ou autres actifs existants, achat du nom de domaine et gestion de l'hébergement, maintenance et mises à jour, formation à la gestion du site), le choix du nom de domaine joue un rôle très important puisque c'est ce dernier qui définit l'identité de notre site, mais aussi de notre société. [...]

[...] Le CSS : Cascading Style Sheets ou « feuilles de style en cascade ». Le CSS est un langage informatique utilisé pour mettre en forme des fichiers HTML ou XML. Il s'applique à tout le site et pas à une seule page. Étant donné que les effets sont purement visuels, ce langage est utilisé en Front pour le design des sites. Il existe des librairies automatisées pour rendre son site Responsive (site dont le contenu s'adapte selon l'appareil ou la taille de l'écran automatiquement) tel que Bootstrap. [...]

[...] Si on cherche des résultats plus précis ou des statistiques supplémentaires, on peut utiliser Google Analytics qui permet une analyse en temps réel. Une autre solution alternative pour savoir sur quelles zones ou quels éléments se concentre l'attention de nos visiteurs est de réaliser une heatmap afin de détecter les zones chaudes de nos pages, c'est-à-dire là où les utilisateurs cliquent le plus, encore une fois, il existe de nombreux outils qui permettent de réaliser ce test (Crazy Egg, Clicktale Une autre méthode possible pour vérifier que son site a correctement été optimisé est de comparer ses performances, la vitesse par exemple à un site web concurrent, pour cela on peut utiliser Dareboost (https://www.dareboost.com/fr/compare). [...]

[...] wpconfig, le code à rajouter dans le. htacess est : < filesmatch > Order allow, deny Deny from all - Renommer sa base de données WordPress et remplacer le préfixe de WordPress, il faut commencer par modifier la valeur de la ligne dans le fichier wp-config.php : $table_prefix = « wp_ » Puis renommer toutes les tables qui portent le prefix wp avec la requête SQL rename : Par exemple si on a décidé que le nouveau préfixe sera msw, avec la table commentmeta cela donne : Rename table wp_commentdata to msw_commentdata; - Il faut également veiller à ne pas utiliser le login par défaut qui est en général admin. [...]