A travers ces quelques notes nous souhaitons partager avec vous notre méthodologie qui constitue le fondement des projets web confiés par nos clients.
Documentation
Il est important de développer une base documentaire dès le démarrage du projet web, et de maintenir l’information relative aux évènements concernant le site impacté et ce au fil des années.
Expression du besoin
Le cahier des charges est élaboré au démarrage du projets et il comporte les spécifications suivantes :
• Spécifications fonctionnelles
• Spécifications techniques
Dans le cahier des charges il sera également inclus les documents d’architecture.
Arborescence
Afin de dégrossir la hiérarchie des fichiers l’accent sera mis sur les axes suivants :
• Réaliser un groupement logique
Carrousel (HTML, CSS, JavaScript…)
• Organisation en dossiers, et sous-dossiers
• Intitulés cohérents (nom de variables, nom de fichiers…)
Règles de nommage
• Aplanir les usages
S’appuyer sur la fonction des éléments
• Langue : anglais ou français
• Casse : minuscule ou majuscule
• Format : « - » ou « _ » ou CamelCase
• Abandon des accents et des espaces
Il est également important de mener en amont une réflexion sur les outils qui seront utilisés, et également concernant la plateforme (DRUPAL, MAGENTO)
CSS & Préprocesseurs
Le projet n’étant pas que fonctionnel une discussion technique sera ouverte sur les CSS et les préprocesseurs.
Un préprocesseur est un programme qui procède à des transformations sur un code source, avant l’étape de traduction proprement dite (compilation ou interprétation).
Dans le cas d’un préprocesseur CSS la syntaxe simplifiée ou enrichie en entrée est analysée et compilée en un langage que nous connaissons tous et que nous utilisons au quotidien : CSS.
Process Build
Le process Build inclue les étapes suivantes :
o Compilation du code Java à la source de l’arborescence du module et placer les résultats dans l’arborescence de sortie
o Compiler le code Java dans l’arborescence de test et placer les résultats de tests dans l’arborescence de sortie
o Créer des copies des fichiers de ressources dans l’arborescence de sortie
o Remonter les dysfonctionnement dans la fenêtre de l’outil de la messagerie
SASS vs LESS
Quel langage choisir pour le préprocesseur CSS ?
Sass (Syntactically Awesome Stylesheets) est un langage de génération dynamique de feuilles de style initialement développé par Hampton Catlin et Nathan Weizenbaum.
Sass est un métalangage de feuilles de style en cascade (CSS). C'est un langage de script qui est interprété en CSS. SassScript est le langage de script lui-même.
Less est un langage dynamique de génération de feuilles de style conçu par Alexis Sellier. Il est influencé par Sass et a influencé "SCSS" (la syntaxe plus récente de Sass) : la syntaxe de LESS est plus proche de CSS1 et un code CSS est aussi un code LESS valide qui a la même sémantique.
Stylus
Toujours dans la réflexion se demander si l’on devra s’en tenir aux bonnes vieilles CSS ou non. Quoiqu’il en soit les préprocesseurs CSS ne remplacent pas le langage CSS en lui même
Compilation
Il est primordial de tenir compte de ces quelques règles de base :
• Modification des sources (pas des CSS générés)
• Ne pas modifier le fichier généré
• Création de mixins clairs et concis. Un mixin ou une classe mixin est une classe destinée à être composée par héritage multiple avec une autre classe pour lui apporter des fonctionnalités. C'est un cas de réutilisation d'implémentation. Chaque mixin représente un service qu'il est possible de greffer aux classes héritières.
Javascrip
Et surement porter une attention à JavaScript. C’est le langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs.
Les règles de bases sont les suivantes :
• Elaguer le superflu
• Analyse des script tiers invasifs JQuery. jQuery est une bibliothèque JavaScript libre et multi-plateforme créée pour faciliter l'écriture de scripts côté client dans le code HTML des pages web
• Changement de sa bibliothèque
Ne pas charger plusieurs fois la même bibliothèque (script)
• Faire une traque des bibliothèques multisessions
• Procéder au fractionnement des fichiers monolithiques
HTML
L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. Faire une belle sélection basée sur les choix suivants :
• Choix judicieux des éléments de HTML5
• Déclaration de l’encodage & des entités HTML
Indiquer le caractère d’encodage des fichiers (UTF8)
Et une question supplémentaire à savoir si l’on devra utiliser HTML5 sachant HTML5 ne comprend pas IE8. Toutefois il existe une solution de contournement avec l’utilisation de HTML5Shiv.
HTML5Shiv est donc un JavaScript de contournement inventé par Sjoerd Visscher, qui permet de styler les éléments de HTML5 dans les versions de Internet Explorer inférieures à la version 9.
EN RESUME
Nous aimerions prendre plaisir à poursuivre la fabuleuse aventure du web avec vous en mettant toujours et toujours plus l’accent autour des points vu précédemment tout en ne perdant pas de vu que cette collaboration est un travail progressif (notamment le nommage…), la documentation devra se faire régulièrement et enfin un pré-commit (trouver et mettre en place une solution avant qu'un changement afin de revoir le code ne soit validé) et une intégration continue.
Comments